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

【问题标题】：How do you import untyped ES6 react components into a Typescript component without typing the JS child components?如何在不键入 JS 子组件的情况下将无类型的 ES6 react 组件导入 Typescript 组件？
【发布时间】：2018-04-12 18:58:09
【问题描述】：

如果我有这样的 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 添加类型/类型定义的情况下摆脱该错误？我在定义它的 OldThingContainer 上尝试了 @augments 解决方案，但这似乎没有帮助。也没有在组件本身上添加注释。

我希望能够在没有类型的情况下导入 JS 的原因是我们正在将 typescript 添加到一个非常大的、多年历史的代码库中，目前很难让人们编写 typescript 组件，更不用说如果他们也必须输入其组件要导入的每个现有组件。

这个问题是否有现有的优雅解决方案，或者我是否必须先于所有人检查并在某个 typedef 文件中手动键入每个现有的 JS 组件（数百个）以消除/防止这些错误？

【问题讨论】：

假设你有一个tsconfig.json，你可以禁用一些导致编译器严格的选项。请参阅此typescriptlang.org/docs/handbook/compiler-options.html 了解您可以禁用的一些选项。但是在这一点上，使用打字稿有什么好处呢？你不妨继续用JS
@smac89 目标是随着时间的推移慢慢转换现有的基础。我的组织对 TS 还不是很满意，所以这被视为获得团队支持的解决方案，这些团队不像其他人那样关心拥有类型安全的代码库。没有自上而下的过渡执行。

标签： javascript reactjs typescript redux

【解决方案1】：

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

一个快速的'n'dirty修复方法是用以下方式注释您的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 越来越流行和添加更多支持，这可能会在几个月后变得更好......

【讨论】：

你刚刚让其他几个开发人员和我非常高兴！