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

在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;
}
复制代码
  1. ReactChild&ReactText
type ReactText = string | number;
type ReactChild = ReactElement | ReactText;
复制代码
  1. 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>;
}
复制代码
  1. 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>;
}
复制代码
  1. 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>>;
复制代码
  1. 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 排除 Tnullundefined
  10. RetrueType 获取函数返回值类型
  11. Readonly:设置为只读属性
文章分类
前端
文章标签