// initialise with null, but tell TypeScript we are looking for an HTMLInputElement // HTMLInputElement 类型非常重要 const inputEl = React.useRef<HTMLInputElement>(null);
/* 这些接口加上 可以同时 export 出去以方便后期复用 */ type MyProps = { // using `interface` is also ok message: string; };
type MyState = { count: number; // like this }; classAppextendsReact.Component<MyProps, MyState> { state: MyState = { // optional second annotation for better type inference count: 0, };
type AppProps = { message: string; count: number; disabled: boolean; /** array of a type! */ names: string[]; /** string literals to specify exact string values, with a union type to join them together */ status: "waiting" | "success"; /** any object as long as you dont use its properties (not common) */ obj: object; obj2: {}; // almost the same as `object` , exactly the same as `Object` /** an object with defined properties (preferred) */ obj3: { id: string; title: string; }; /** array of objects! (common) */ objArr: { id: string; title: string; }[]; /** any function as long as you don't invoke it (not recommended) */ onSomething: Function; /** function that doesn't take or return anything (VERY COMMON) */ onClick: () =>void; /** function with named prop (VERY COMMON) */ onChange: (id: number) =>void; /** alternative function type syntax that takes an event (VERY COMMON) */ onClick(event: React.MouseEvent<HTMLButtonElement>): void; /** an optional prop (VERY COMMON!) */ optional?: OptionalType; };
exportdeclareinterface AppProps { children1: JSX.Element; // bad, doesnt account for arrays children2: JSX.Element | JSX.Element[]; // meh, doesn't accept strings children3: React.ReactChildren; // despite the name, not at all an appropriate type; it is a utility children4: React.ReactChild[]; // better children: React.ReactNode; // best, accepts everything functionChildren: (name: string) => React.ReactNode; // recommended function as a child render prop type style?: React.CSSProperties; // to pass through style props onChange?: React.FormEventHandler<HTMLInputElement>; // form events! the generic parameter is the type of event.target props: Props & React.PropsWithoutRef<JSX.IntrinsicElements["button"]>; // to impersonate all the props of a button element without its ref }
/** JSX.Element -> Return value of React.createElement React.ReactNode -> Return value of a component */