TypeScript 高级类型模式

条件类型

条件类型允许我们根据类型关系创建新类型：

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

type A = IsString<'hello'>; // true
type B = IsString<42>;      // false

分布式条件类型

当条件类型用于泛型时，会自动分布：

type ToArray<T> = T extends unknown ? T[] : never;

type Result = ToArray<string | number>;
// string[] | number[]

映射类型

type Readonly<T> = {
  readonly [K in keyof T]: T[K];
};

type Optional<T> = {
  [K in keyof T]?: T[K];
};

interface User {
  name: string;
  age: number;
}

type ReadonlyUser = Readonly<User>;

模板字面量类型

TypeScript 4.1 引入的模板字面量类型让字符串类型的操作变得极其强大。

type EventName = `on${Capitalize<string>}`;

type Event = {
  [K in EventName]: () => void;
};

实战：类型安全的 API 客户端

type ApiResponse<T> = {
  data: T;
  error: null;
} | {
  data: null;
  error: string;
};

async function fetchApi<T>(
  url: string
): Promise<ApiResponse<T>> {
  try {
    const res = await fetch(url);
    const data = await res.json();
    return { data, error: null };
  } catch (e) {
    return { data: null, error: String(e) };
  }
}

总结

高级类型模式是 TypeScript 真正的威力所在。掌握它们，你将能构建出既灵活又安全的类型系统。