如何避免在导入JavaScript中定义的React类时在TypeScript中反映道具类型错误？

Question

我们正在将大型React Javascript项目转换为TypeScript。

我们有定义React类的现有文件：

// foo.js
class Foo extends React.Component { ... }

module.exports = Foo

我们希望在新的TypeScript文件中使用这些组件：

// bar.tsx
import Foo from "./foo"

export default class Bar extends React.Component<any, any> {
    render() { return <Foo baz="buzz" /> }
}

然而，这会导致错误：

Property 'bar' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Foo> & Readonly<{ children?: ReactNode; }> & Read...'.

我们如何避免此错误？每当我们修改文件时，我们都会将文件转换为TypeScript，但如果还必须修改原始文件中包含的任何文件，那么这不是一个可行的策略。

Answer 1

我们通过添加声明文件untyped-components.d.ts来解决此问题。在这个文件中，我们为每个无类型组件添加了一个声明：

declare module "foo" {
  const Foo: any
  export = Foo
}

...

declare module "zap" {
  const Zap: any
  export = Zap
}

现在每当我们转换文件时，我们都会将其从此文件中删除。