预定义类型 Type Definitions

React.FC<Props> | React.FunctionComponent<Props>

函数组件

const MyComponent: React.FC<Props> = ...

React.Component<Props, State>

类组件

class MyComponent extends React.Component<Props, State> { ...

React.ComponentType<Props>

React.FC | React.Component的集合， 在高阶组件中运用

const withState = <P extends WrappedComponentProps>(
  WrappedComponent: React.ComponentType<P>,
) => { ...

React.ComponentProps<typeof XXX>

React.ReactElement | JSX.Element

代表 react 元素，可以是 DOM 组件 (e.g. <div />)，也可以是 React 组件(e.g. <MyComponent />)。

const elementOnly: React.ReactElement = <div /> || <MyComponent />;

React.ReactNode

代表元素节点，可以是 React.ReactElement（包括Fragments和 Portals） ，也可以是JS原始类型。

const elementOrPrimitive: React.ReactNode = 'string' || 0 || false || null || undefined || <div /> || <MyComponent />;
const Component = ({ children: React.ReactNode }) => ...

React.CSSProperties

css-in-js 的样式

const styles: React.CSSProperties = { flexDirection: 'row', ...
const element = <div style={styles} ...

React.HTMLProps<HTMLXXXElement>

代表继承了html元素的属性类型

const Input: React.FC<Props & React.HTMLProps<HTMLInputElement>> = props => { ... }

<Input about={...} accept={...} alt={...} ... />

React.ReactEventHandler<HTMLXXXElement>

const handleChange: React.ReactEventHandler<HTMLInputElement> = (ev) => { ... } 

<input onChange={handleChange} ... />

React.XXXEvent<HTMLXXXElement>

const handleChange = (ev: React.MouseEvent<HTMLDivElement>) => { ... }

<div onMouseMove={handleChange} ... />