React/TypeScript: Destructured JS PropTypes不拾取作为推断TS类型?<

Question

我有一个用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，使其在技术上无效?可以"rest"要定义道具吗?
• 我必须迁移MyButton到TypeScript吗?

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

Answer 1

我找到了一个解决方法，通过对JavaScript组件进行轻微调整来避免这个问题。

如果props在函数参数列表中被立即解构，那么TypeScript似乎能够拾取它们。这似乎包括"休息"。参数。

"Re"构造props似乎可以达到目的——可能会欺骗TypeScript而不仔细检查。

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

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

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