Typescript JSDoc ...Rest type syntax

Question

Got a problem when beginning with typescript on an existing large react/redux application.

As a proof of concept, I've converted one of my react files to a .ts file. I'm trying to add types using JSDoc to the imported JS files to tell Typescript what params are available (instead of just declaring the module as any in a .d.ts file).

My issue is with a "rest" parameter that's used in a react functional component to pass props through to a another react component. In the below example, Typescript is identifying the prop "id" as not existing.

.tsx file:

import ReactFunction from 'wherever_it_is/react_function';

//inside another react component
<ReactFunction
    prop1="something"
    id="unique"
/>

wherever_it_is/react_function.jsx file:

/**
 * @typedef {object} ReactFunctionProps
 * @prop {boolean} prop1 - descriptive text
 * @prop {...any} ...otherProps - pass through props
 */

/**
 * descriptive comment about ReactFunction
 *
 * @param {ReactFunctionProps} props
 * @return {import("@types/react").JSX.Element}
 */
export default function ReactFunction({
    prop1,
    ...otherProps
}) {
    return (
        <OtherThing
            {...otherProps}
        />
    );
}

Using Typescript 4.1.3.

Anyone know the correct syntax to Typescript JSDoc a "...rest" operator? As far as I can tell, I am using the correct syntax from https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html where the rest operator is mentioned.

Any other suggestions? (other than declare module wherever_it_is/react_function; which I'm aware will import the module as any -- trying not to resort to that yet)

Answer 1

I found the @typedef way, where you constructs new Props type and then just intersect it with React.HTMLAttributes like in pure Typescript syntax:

/**
 * @typedef {Object} TextInputProps
 * @property {string} [className]
 * @property {string} label
 */

/**
 * @param {TextInputProps & React.InputHTMLAttributes<HTMLInputElement>} props
 */
function TextInput({
    className = '',
    label = '',
    ...props
}) {...}

That way seems a little weird, because you need to mix Typescript types and functionality with JSdoc syntax, but it worked by me.

You can also see square brackets for classname param - you can mark that param as optional.