当 Component<Props> 定义时，TestUtils findRenderedComponentWithType 编译失败

Question

文件package.json:

{
  "scripts": {
    "test": "tsc --project . --noEmit"
  },
  "dependencies": {
    "@types/react": "^16.7.6",
    "@types/react-dom": "^16.0.9",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "typescript": "^3.1.6"
  }
}

文件tsconfig.json:

{
  "compilerOptions": {
    "lib": ["es2015", "dom"],
    "target": "es2015",
    "moduleResolution": "node",
    "jsx": "react",
    "strict": true
  }
}

文件test.tsx:

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import * as TestUtils from 'react-dom/test-utils'

interface Props {
  a: number
}

class Component extends React.Component<Props> {
  render () {
    return 'test'
  }
}

const div = TestUtils.renderIntoDocument(
  <div>
    <Component a={1} />
  </div>
) as React.Component

const component = TestUtils.findRenderedComponentWithType(div, Component)

运行 tsc --project . --noEmit 结果出现以下错误：

src/test.tsx:22:64 - error TS2345: Argument of type 'typeof Component' is not assignable to parameter of type 'ClassType<any, Component, ComponentClass<{}, any>>'.
  Type 'typeof Component' is not assignable to type 'ComponentClass<{}, any>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type '{}' is not assignable to type 'Readonly<Props>'.
        Property 'a' is missing in type '{}'.

21 const component = TestUtils.findRenderedComponentWithType(div, Component)
                                                                  ~~~~~~~~~

这是一个错误吗？如果我禁用 --strict 选项，或者在 Component<Props> 中省略 <Props>，它编译成功。

Answer 1

react-dom 类型声明在启用 strictFunctionTypes 选项时无法正常工作。我有一个 change to fix the problem you saw and a few others related to strictFunctionTypes. See 可以使用我修改过的声明的可能方式，直到它们被合并到 DefinitelyTyped 中。

当 Component<Props> 定义时，TestUtils findRenderedComponentWithType 编译失败

TestUtils findRenderedComponentWithType fails to compile when Component<Props> defined

typescript

reactjs

typescript-typings

react-tsx