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选项，或者在<Props>中省略了Component<Props>，则编译成功。

Answer 1

启用react-dom选项时，strictFunctionTypes类型声明不起作用。我有一个change可以解决您遇到的问题，还有一些与strictFunctionTypes相关的问题。请参见this answer，了解在修改后的声明合并到DefinitelyTyped中之前可以使用它们的可能方法。

定义Component <props>时，TestUtils findRenderedComponentWithType无法编译

1 个答案: