如何将 React proptypes 类型化组件作为任何类型导入 React Typescript 组件

Question

我们在 proptypes 中完成了相当大的组件库，并且我们正在转向 typescript。

因此，当我将 .jsx 组件移动为 .tsx 组件时，导入的 .jsx 组件突然开始抛出打字错误，导入的组件目前没有任何问题，我不能只是重写它的打字稿到处都在使用，目前它会比付出更多的努力。

为了解决这个问题，我做了以下操作（删除了很​​多中间代码）

import MyReactComponent from 'path/to/component';

const FixedMyReactComponent: any = MyReactComponent;

return <FixedMyReactComponent/>

它可以工作，我的错误消失了，但我觉得这很烦人，我宁愿不必制作 FixedMyReactComponent 并在本地为其设置类型，并且（正如我已经说过的）我不想要现在花时间解决打字稿不理解我的组件的事实，所以我想找到一些方法来全局告诉打字稿忽略你从 js / jsx 得到的类型错误，只报告来自 .ts 的错误/.tsx.

我想应该是这样的

declare module '*.jsx' {
  var _: React.Component<any, any>;
  export default _;
}

但这似乎没有我想要的效果。

Answer 1

将你的 proptypes 移动到一个类型，然后你就可以输入你的组件了。

import { FC } from 'react'

type FixedMyReactComponentProps = {
  id: string;
  name: string;
}

const FixedMyReactComponent: FC<FixedMyReactComponentProps> = ({name, id}) => {
...
}

但是，如果您必须输入任何内容。你声明返回类型：

const FixedMyReactComponent = (): any => {
  ...
}

Answer 2

如果你现在做这项工作的时间有限，你可以在所有新创建的 .ts?(x) 文件的顶部使用 // @ts-nocheck（在 TypeScript 中添加 v3.7 用于这个确切的用例）并逐渐将它们删除时间。这将类型检查 NOTHING 基本上将文件视为 javascript，同时导出文件中定义的任何显式或隐式类型。您可能还想松开 compilerOptions 之类的 this，直到您以后可以拧紧它们。

---

如果您确实有时间完成转换，您可以考虑使用 lyft 的 react-javascript-to-typescript-transform npm 包。它已被弃用，但似乎可以完成工作，至少对于 prop-type 到类型的转换而言。

从 react 的一个简单的 js 原型示例开始。

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

安装模块...

npm install -g react-js-to-ts

运行此命令将所有js文件转换为ts。

react-js-to-ts ./**/*.js

然后该包将所有带有prop-types的js文件替换为带有prop接口的.tsx。

type GreetingProps = {
  name?: string
};
class Greeting extends React.Component<GreetingProps, {}> {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

适用于功能组件和类组件。我不确定这对于组件中可能包含的状态类型或其他非类型代码的行为如何，但这将是向前迈出的一大步。无论如何，该状态暂时可以很容易地输入为any。也不确定这个包对复杂原型（如PropTypes.shape 和PropTypes.arrayOf）的性能如何。

如果我是你，我会验证所有更改，但任何转换错误都应该通过类型错误非常明显。无需使用假的 js 到 ts 组件的转换。即使在运行此代码之后，如果您遇到太多类型错误，您也可以关闭 strict 模式，甚至在需要时添加 // @ts-nocheck，直到您的团队有足够的带宽来解决错误类型。

老实说，我认为这是最好的方法，任何其他试图欺骗 typescript 编译器的方法都将比这更困难和更hacky，或者提供与原始原型定义不一致的类型。