打字稿 JSDoc ...休息类型语法

Question

在现有的大型 react/redux 应用程序上使用打字稿开始时出现问题。

作为概念证明，我已将我的一个 React 文件转换为 .ts 文件。我正在尝试使用 JSDoc 添加类型到导入的 JS 文件，以告诉 Typescript 哪些参数可用（而不是仅仅在 .d.ts 文件中将模块声明为任何）。

我的问题是在 React 功能组件中使用的“rest”参数将 props 传递给另一个 React 组件。在下面的示例中，Typescript 将道具“id”标识为不存在。

.tsx 文件：

import ReactFunction from 'wherever_it_is/react_function';

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

wherever_it_is/react_function.jsx 文件：

/**
 * @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}
        />
    );
}

使用打字稿 4.1.3.

有人知道 Typescript JSDoc 的正确语法是“...rest”运算符吗？据我所知，我使用的是 https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html 中提及其余运算符的正确语法。

还有其他建议吗？（除了我知道的 declare module wherever_it_is/react_function; 会将模块导入为 any - 尽量不要诉诸于此）

Answer 1

解决方法是创建一个 .d.ts 文件并在 Typescript 语法中定义类型。

wherever_it_is/react_function.d.ts:

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

虽然这在技术上不能回答问题，但它是一种前进的方式。我怀疑 JSDoc 键入方法不支持 ...rest 用例。

Answer 2

我找到了@typedef 方法，您可以在其中构造新的 Props 类型，然后将其与 React.HTMLAttributes 相交，就像在纯 Typescript 语法中一样：

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

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

这种方式看起来有点奇怪，因为你需要将 Typescript 类型和功能与 JSdoc 语法混合使用，但它对我有效。

您还可以看到 classname 参数的方括号 - 您可以将该参数标记为可选。

打字稿 JSDoc ...休息类型语法

Typescript JSDoc ...Rest type syntax

javascript

jsdoc

typescript

reactjs