Writing TypeScript in React must have familiar type definitions

Write TypeScript in React

Related packages @types/react and @types/react-dom

Lead type

Elements related to

1. ReactElement

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

2. ReactChild&ReactText

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;
Copy the code

3. ReactNode

type ReactNode =
  | ReactChild
  | ReactFragment
  | ReactPortal
  | boolean
  | null
  | undefined;
Copy the code

Attributes related to

1. Attributes

type Key = string | number;
interfaceAttributes { key? : Key |null;
}
interface RefAttributes<T> extendsAttributes { ref? : Ref<T>; }interface ClassAttributes<T> extendsAttributes { ref? : LegacyRef<T>; }Copy the code

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>;
Copy the code

---

Component declarations

1. React.Component

   , stateful component

   ,s>

class Component<P.S> {
  readonlyprops: Readonly<{ children? : ReactNode }> & Readonly<P>; state: Readonly<S>; }Copy the code

2. React.FC, a functional component

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

---

Ref reference passing

forwardRef

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

2. ForwardRefExoticComponent and ForwardRefRenderFunction

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

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

The difference between

1. DefaultProps and propTypes do not exist on RenderFunction, but on exoticComponent
2. ExoticComponent has an additional property $$Typeof
3. For Call Signature, the RenderFunction receives a props property, the overview line must have a chilren property, and the ExoticComponent only needs to receive 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
       ) :ReducerStateWithoutAction<R>, DispatchWithoutAction];
function useRef<T> (initialValue: T) :MutableRefObject<T>;
function useLayoutEffect(effect: EffectCallback, deps? : DependencyList) :void;
function useEffect(effect: EffectCallback, deps? : DependencyList) :void;
Copy the code

---

The Event type

// Clipboard event object
ClipboardEvent<T = Element>
// Drag the event object
DragEvent<T = Element>
//change the event object
ChangeEvent<T = Element>
// Keyboard event object
KeyboardEvent<T = Element>
// Mouse event object
MouseEvent<T = Element>
// Touch the event object
TouchEvent<T = Element>
// Wheel event object
WheelEvent<T = Element>
// Animate the event object
AnimationEvent<T = Element>
// Transition event object
TransitionEvent<T = Element>
Copy the code

---

EventHandler type

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>>;
Copy the code

Promise

Promise

is a generic type, and the T generic variable is used to determine the parameter type of the first callback function (onfulfilled) received when using the THEN method.

Generic tools

1. Typeof defines the type before determining it
2. Partial makes all properties of T optional
3. Requires makes all properties of T mandatory
4. Exclude
   
   T Exclude the attributes in U
   ,u>
5. Extract
   
   T
   ,u>
6. Pick<T,K>
7. Record<K,L>
8. Omit
   
   T is K
   ,k>
9. NonNullable ruled outT 为 null 、undefined
10. RetrueType Gets the return value type of the function
11. Readonly: Set to read-only