React JSX Tip: Accept an instance of a Component
这里说明了可以用React.ReactElement
,来注解一个class的实例化结果。
但是我自己试了,发现确实不报错,但是我随便输入啥,都是正确的,压根起不到类型校验的作用。
大伙可以拷到自己的编辑器里实验下:
import * as React from 'react';
type Props = {
foo: string;
};
type State = {
value: number;
};
class MyComponent2 extends React.Component<{ foo2: string; }, State> {
render(): React.ReactElement {
return <div />;
}
}
class MyComponent extends React.Component<Props, State> {
render(): React.ReactElement {
const { value } = this.state;
const { foo } = this.props;
return (
<span>
{foo}
{value}
</span>
);
}
}
const foo: React.ReactElement<MyComponent> = <MyComponent foo="123" />;
const bar: React.ReactElement<MyComponent> = <MyComponent2 foo2="123" />;
export default MyComponent;
而且我看了@types/react
里面对于React.ReactElement
的定义:
interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
type: T;
props: P;
key: Key | null;
}
第一个泛型参数,明明是Props
的类型定义呀,所以传入class,把class当作props来用了。所以我的写的错误代码,也没有报错:
const bar: React.ReactElement<MyComponent> = <MyComponent2 foo2="123" />;
是不是我哪里理解的不对?