Typescript JSDoc …Rest 类型语法

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 adts 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

A workaround is to create adts file and define the type in Typescript syntax.

wherever_it_is/react_function.d.ts:

export default function ReactFunction({
    prop1,
    ...otherProps 
}: {
    [x: string]: any;
    prop1: any;
}): JSX.Element;

While this technically doesn't answer the question, it is a way forward. My suspicion is that the...rest use case isn't supported by the JSDoc typing method.

Answer 2

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.