react 使用ts

函数组件

必须为props定义 类型

export const Header = (props: { text: string }) => <h2>{props.text}</h2>;
<Header text="hello" />

FC 类型包含children属性

export const Header: React.FC<{}> = (props) => <p>{props.children}</p>;
<Header>
  <h2>hello world</h2>
</Header>

VFC 类型不包含children属性

export const Header: React.VFC<{ builder: React.ReactNode }> = (props) => (
  <p>{props.builder}</p>
);
<Header builder={<h2>hello world</h2>} />;

class 组件

需要为props和state定义类型

export interface IProps {
  name: string;
}
export interface IState {}
export class Hello extends Component<IProps, IState> {
  render() {
    return (
      <>
        <p>hello {this.props.name}</p>
      </>
    );
  }
}

<Hello name="Ajanuw"/>

装饰器

@withHeader({})
class App extends Component {
  render() {
    return (
      <div className="App">
        <Header text="hello" />
        <Footer text="over" />
      </div>
    );
  }
}


function withHeader(opt: any) {
  return function(Target: any) {
    return class WithHeader extends Component {
      render() {
        console.log(opt);
        return (
          <div>
            123
            <Target />
          </div>
        );
      }
    };
  };
}