npx create-react-app appname --typescript

import React from "react";
import { Button } from "antd";interface Greeting {name: string;firstName?: string;lastName?: string;
}// 没有使用React.FC
const HelloOld = (props: Greeting) => <Button>你好{props.name}</Button>;// 使用React.FC泛型类型
const Hello: React.FC<Greeting> = (props) => {return (<Button>Hello {props.name}</Button>)
};export { Hello, HelloOld };

import React,{Fragment} from "react";
import { Button } from "antd";interface Greeting {name: string;firstName?: string;lastName?: string;
}
interface State {count: number
}// 泛型类型，第一个传入参数约束属性props，第二个约束状态state(内部数据)
class HelloClass extends React.Component<Greeting, State> {state: State = {count: 0};static defaultProps = {  // 属性默认值firstName: "",lastName: "",};render() {return (<Fragment><p>点击了{this.state.count}次</p><Button onClick={()=>{this.setState({count: this.state.count+1})}}>Hello{this.props.name}Class</Button></Fragment>);}
}export default HelloClass;

import React from "react";
import HelloClass from "./HelloClass";interface Loading {loading: boolean;
}function HelloHoc<P>(params?: any) {return function<P>(WrappedComponent: React.ComponentType<P>) { // P表示被包装组件的属性的类型return class NewComponent extends React.Component<P & Loading>{ // 这里使用交叉类型，为新组件增加一些属性,接口Loading定义了新增的属性声明render(){return this.props.loading ? <div>Loading</div> : <WrappedComponent {...this.props as P}/>}}}
}export default HelloHoc()(HelloClass);

import React, { useState, useEffect } from "react";
import { Button } from "antd";interface Greeting {name: string;firstName?: string;lastName?: string;
}const HelloHooks = (props: Greeting) => {const [ count, setCount ] = useState(0); // 设了初值，所以不用定义类型const [ text, setText ] = useState<string | null>(null);useEffect(()=>{count > 5 && setText("休息一下");},[count]); // 第二个参数的作用是，只有当count改变的时候，函数内的逻辑才会执行。return (<><p>你点击了Hooks {count} 次 {text}</p><Button onClick={()=>{setCount(count+1)}}>{props.name}</Button></>);
};export default HelloHooks;

class HelloClass extends React.Component<Greeting, State> {state: State = {count: 0};clickHandle = (e: React.MouseEvent) => { // 事件对象e的类型使用内置的合成事件。在回调函数中，e的属性都会无效e.persist(); // 将该事件从池中删除合成事件，可以正常使用console.log(e);// this.setState({count: this.state.count+1})};inputHandle = (e: React.FormEvent<HTMLInputElement>) => {// e.persist();console.log(e.currentTarget.value); // 此时编译器报错，认为没有value属性，需要指定<HTMLInputElement>泛型类型// console.log(e.target.value); // 仍然不行};render() {return (<Fragment><p>点击了{this.state.count}次</p><Button onClick={this.clickHandle}>Hello{this.props.name}Class</Button><input onChange={this.inputHandle}/></Fragment>);}
}