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错误。如果不将类型/ typedef添加到/用于OldThing和/或OldThingContainer，我如何摆脱该错误？我在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可能变得非常复杂。（流程只会挂起你的编辑器＆＃34;等待流服务器＆＃34;，这更糟糕）。随着TS + Redux越来越受欢迎并且增加了更多支持，这可能会在几个月内变得更好......

如何在不键入JS子组件的情况下将无类型的ES6反应组件导入到Typescript组件中？

1 个答案: