File 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"
}
}
File tsconfig.json
:
{
"compilerOptions": {
"lib": ["es2015", "dom"],
"target": "es2015",
"moduleResolution": "node",
"jsx": "react",
"strict": true
}
}
File 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)
Running tsc --project . --noEmit
results with the following error:
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)
~~~~~~~~~
Is this a bug? If I disable the --strict
option, or omit the <Props>
in Component<Props>
, it compiles successfully.
The react-dom
type declarations were not designed to work when the strictFunctionTypes
option is enabled. I have a change to fix the problem you saw and a few others related to strictFunctionTypes
. See this answer for the possible ways you can use my modified declarations until they get merged into DefinitelyTyped.