javascript - React/TypeScript：解构的 JS PropTypes 没有被选为推断的 TS 类型？

问题描述

我有一个用 JavaScript 编写的 React 项目，我已经开始向其中添加 TypeScript。

JS 组件在 TS 中给我带来了问题，因为 TS 从组件的中推断出类型PropTypes，但是我希望添加的属性是解构的（因此不在中PropTypes）。

让我们想象一下这个JavaScript组件：

function MyButton(props) {
  const { myOwnProp, children, ...rest } = props;

  /* Do something based on myOwnProp */

  return (
    <button {...rest}>{children}</button>
  );
}

MyButton.propTypes = {
  myOwnProp: PropTypes.any,
  children: PropTypes.any
};

现在在我的TypeScript组件中，我希望使用MyButton：

function SomeComponent() {
  return (
    <MyButton onClick={() => {/* click event */}}>Click me</MyButton>
  );
}

但是，这给了我一个类型错误，因为我提供的属性MyButton与它的PropTypes. 显然 TypeScript 看不到这onClick是一个有效的属性来提供（可以理解）。

如何向组件提供这些属性？
是否缺少某些PropTypes内容使其在技术上无效？可以定义“休息”道具吗？
我必须迁移MyButton到 TypeScript 吗？

如有必要，我可以进行更改MyButton，但我更喜欢不需要重大重写的解决方案，因为这可能存在于多个组件中。

标签： javascriptreactjstypescriptreact-proptypes

我找到了一种解决方法，可以通过对 JavaScript 组件进行细微调整来避免该问题。

如果道具在函数参数列表中立即被解构，TypeScript 似乎能够拾取道具。这似乎包括“休息”参数。

“重新”构建道具似乎可以解决问题 - 可能会欺骗 TypeScript 使其不仔细检查它。

function MyButton({ ...props }) { // destructures the object back into an object
  const { myOwnProp, children, ...rest } = props;

  /* etc */
}

这可能不是一个很好的解决方案，但如果目标只是让 TypeScript 能够容忍模棱两可的 JS props，它可能是可以接受的。

.d.ts或者，正如@Halcyon 所提到的，提供一个文件可能会更好。

javascript - React/TypeScript：解构的 JS PropTypes 没有被选为推断的 TS 类型？

问题描述

解决方案

推荐阅读