React 中的条件类型与映射类型

条件类型基础

type IsString<T> = T extends string ? true : false;

type A = IsString<string>;  // true
type B = IsString<number>;  // false
type C = IsString<'hello'>; // true

根据其他属性设置条件属性

type InputProps<T extends 'text' | 'number'> = {
  type: T;
} & (T extends 'number' ? { min?: number; max?: number } : { maxLength?: number });

const numInput: InputProps<'number'> = { type: 'number', min: 0, max: 100 };
const txtInput: InputProps<'text'> = { type: 'text', maxLength: 50 };

映射类型

type Optional<T> = { [K in keyof T]?: T[K] };
type Readonly<T> = { readonly [K in keyof T]: T[K] };
type Nullable<T> = { [K in keyof T]: T[K] | null };

让更新表单的属性变为可选

interface User { id: string; name: string; email: string; role: string; }

// Update form — all fields optional:
type UserUpdateProps = Partial<Omit<User, 'id'>>;

function UserUpdateForm(props: UserUpdateProps) {
  // name, email, role are all optional
}

使用映射类型的 Record

type Status = 'idle' | 'loading' | 'success' | 'error';

type StatusConfig = Record<Status, {
  label: string;
  icon: React.ReactNode;
  color: string;
}>;

const statusConfig: StatusConfig = {
  idle: { label: 'Ready', icon: <ReadyIcon />, color: 'gray' },
  loading: { label: 'Loading...', icon: <Spinner />, color: 'blue' },
  success: { label: 'Done', icon: <CheckIcon />, color: 'green' },
  error: { label: 'Error', icon: <XIcon />, color: 'red' },
};

选取必填键

type RequiredKeys<T> = {
  [K in keyof T]-?: undefined extends T[K] ? never : K;
}[keyof T];

interface FormData { name: string; email: string; phone?: string; }
type Required = RequiredKeys<FormData>; // 'name' | 'email'

模板字面量类型

type EventName = 'click' | 'change' | 'focus';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onChange' | 'onFocus'

type ApiPath<R extends string> = `/api/${R}`;
type UserPath = ApiPath<'users'>; // '/api/users'

有条件地提取属性

type AllProps = 'onClick' | 'onHover' | 'onChange' | 'style';
type EventHandlers = Extract<AllProps, `on${string}`>;
// 'onClick' | 'onHover' | 'onChange'

type NonEventProps = Exclude<AllProps, `on${string}`>;
// 'style'

用于表单验证的映射类型

interface LoginForm { email: string; password: string; }

type FormErrors<T> = { [K in keyof T]?: string };
type LoginErrors = FormErrors<LoginForm>;
// { email?: string; password?: string }

const errors: LoginErrors = { email: 'Invalid email format' };

判别映射类型

type EventMap = {
  click: { x: number; y: number };
  keydown: { key: string; code: string };
  resize: { width: number; height: number };
};

type Handler<E extends keyof EventMap> = (event: EventMap[E]) => void;

function on<E extends keyof EventMap>(event: E, handler: Handler<E>) {
  window.addEventListener(event, handler as EventListener);
}

何时不要过度设计类型

快速检查

回顾