在React中书写TypeScript必须眼熟的类型定义

在 React 中书写 TypeScript

相关包 @types/react 和@types/react-dom

前置类型

元素相关

1. ReactElement

interface ReactElement<
  P = any,
  T extends string | JSXElementConstructor<any> =
    | string
    | JSXElementConstructor<any>
> {
  type: T;
  props: P;
  key: Key | null;
}

2. ReactChild&ReactText

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;

3. ReactNode

type ReactNode =
  | ReactChild
  | ReactFragment
  | ReactPortal
  | boolean
  | null
  | undefined;

属性相关

1. Attributes

type Key = string | number;
interface Attributes {
  key?: Key | null;
}
interface RefAttributes<T> extends Attributes {
  ref?: Ref<T>;
}
interface ClassAttributes<T> extends Attributes {
  ref?: LegacyRef<T>;
}

2. Ref

interface RefObject<T> {
  readonly current: T | null;
}
type RefCallback<T> = {
  bivarianceHack(instance: T | null): void;
}["bivarianceHack"];
type Ref<T> = RefCallback<T> | RefObject<T> | null;
type LegacyRef<T> = string | Ref<T>;

---

组件声明

1. React.Component<P,S>,有状态组件

class Component<P, S> {
  readonly props: Readonly<{ children?: ReactNode }> & Readonly<P>;
  state: Readonly<S>;
}

2. React.FC,函数式组件

type FC<P = {}> = FunctionComponent<P>;
interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}

---

Ref 引用传递

forwardRef

function forwardRef<T, P = {}>(
  render: ForwardRefRenderFunction<T, P>
): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

2. ForwardRefExoticComponent 和 ForwardRefRenderFunction

interface ForwardRefExoticComponent<P> {
  (props: P): ReactElement | null;
  readonly $$typeof: symbol;
  displayName?: string;
  defaultProps?: Partial<P>;
  propTypes?: WeakValidationMap<P>;
}

interface ForwardRefRenderFunction<T, P = {}> {
  (
    props: PropsWithChildren<P>,
    ref: ((instance: T | null) => void) | MutableRefObject<T | null> | null
  ): ReactElement | null;
  displayName?: string;
  defaultProps?: never;
  propTypes?: never;
}

区别

1. defaultProps,propTypes 不存在于 renderfunction 上,相反均存在于 exoticComponent 上
2. exoticComponent 拥有另外的属性 $$typeof
3. 对于 call signature 来说,renderfunction 接收一个 props 属性,概述行必须拥有 chilren 属性,而 exoticcomponent 则只需要接收 props 属性就行

---

Hooks

function useContext<T>(context: Context<T>);
function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;
function useCallback<T extends (...args: any[]) => any>(
  callback: T,
  deps: DependencyList
): T;
function useState<S>(
  initialState: S | (() => S)
): [S, Dispatch<SetStateAction<S>>];
function useReducer<R extends ReducerWithoutAction<any>, I>(
  reducer: R,
  initializerArg: I,
  initializer: (arg: I) => ReducerStateWithoutAction<R>
): [ReducerStateWithoutAction<R>, DispatchWithoutAction];
function useRef<T>(initialValue: T): MutableRefObject<T>;
function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;
function useEffect(effect: EffectCallback, deps?: DependencyList): void;

---

Event 类型

//剪贴板事件对象
ClipboardEvent<T = Element>
//拖拽事件对象
DragEvent<T = Element>
//change事件对象
ChangeEvent<T = Element>
//键盘事件对象
KeyboardEvent<T = Element>
//鼠标事件对象
MouseEvent<T = Element>
//触摸事件对象
TouchEvent<T = Element>
//滚轮事件对象
WheelEvent<T = Element>
//动画事件对象
AnimationEvent<T = Element>
//过渡事件对象
TransitionEvent<T = Element>

---

EventHandler 类型

type EventHandler<E extends SyntheticEvent<any>> = {
  bivarianceHack(event: E): void;
}["bivarianceHack"];
type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;
type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>;
type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;
type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>;
type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>;
type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>;
type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>;
type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;
type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;
type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;
type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;
type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>;
type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;

Promise

Promise<T> 是一个泛型类型,T 泛型变量用于确定使用 then 方法时接收的第一个回调函数(onfulfilled)的参数类型.

工具泛型

1. typeof 先定义后确定类型
2. Partial将 T 所有属性变为可选
3. Requires将 T 所有属性变为必选
4. Exclude<T,U> T 中剔除 U 中属性
5. Extract<T,U> T 中选出 U 中属性
6. Pick<T,K>
7. Record<K,L>
8. Omit<T,K> T 中剔除属性是 K
9. NonNullable 排除 T 为 null 、undefined
10. RetrueType 获取函数返回值类型
11. Readonly:设置为只读属性