我发现typescripe-book有一个地方写错了

#1

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" />;

是不是我哪里理解的不对?