如何在不键入JS子组件的情况下将未类型化的ES6 react组件导入Typescript组件？

Question

如果我有这样的ES6组件：

 component OldThing extends React.Component { constructor(props) { super(props); } render() { return <div>{this.props.someProp}</div>; } } 

像这样的ES6容器：

 const OldThingContainer = connect(mapStateToProps, mapDispatchToProps)(OldThing); 

和一个新的打字稿组件，如下所示：

 component NewThing extends React.Component<Props, State> { render() { return <OldThingContainer someProp={someValue} /> } } 

我目前收到有关OldThing上不存在的someProp的IntrinsicAttributes错误。 如何在不为OldThing和/或OldThingContainer添加类型/ typedef的情况下摆脱该错误？ 我在定义它的OldThingContainer上尝试了@augments解决方案，但这似乎无济于事。 也没有在组件本身上添加注释。

我希望能够不带类型地导入JS的原因是，我们正在将打字稿添加到一个很大的，已有多年历史的代码库中，并且目前很难使人们完全编写打字稿组件，更不用说他们是否也必须打字删除其组件要导入的每个现有组件。

是否存在解决此问题的优雅解决方案，还是我将不得不先经过每个人并在某个typedef文件中手动键入每个现有的JS组件（数百个）以消除/防止这些错误？

Answer 1

我尝试了您的示例，并且为您的组件推断出的connect类型似乎有些问题。

一种快速的解决方法是使用以下方法注释您的JS组件：

/**
 * @type {React.ComponentType<any>}
 */
const OldThingContainer = connect(mapStateToProps, mapDispatchToProps)(
  OldThing
);

一种更优雅的解决方案（但可能无法实现）将试图深入到react-redux 。 connect函数要求您提供一些类型参数以使其正常工作。 如果未提供，这些参数将被赋予{} ，而不是any （因为any参数都可以悄悄地吞噬您的类型）。

评论：从我使用react + redux + typescript进行的工作中，lib typedef是最大的痛点之一。 React typedef会变得非常复杂。 （流只会使您的编辑器挂起“等待流服务器”，这甚至更糟）。 随着TS + Redux变得越来越流行并且添加了更多支持，这在几个月内可能会变得更好...