TypeScript高级类型Skill typescript-advanced-types

---

name: typescript-advanced-types description: 掌握TypeScript的高级类型系统，包括泛型、条件类型、映射类型、模板字面量类型和工具类型，用于构建类型安全的应用程序。在实现复杂类型逻辑、创建可重用类型工具或确保TypeScript项目中的编译时类型安全时使用。

TypeScript 高级类型

全面指南，用于掌握TypeScript的高级类型系统，包括泛型、条件类型、映射类型、模板字面量类型和工具类型，以构建健壮、类型安全的应用程序。

何时使用此技能

• 构建类型安全的库或框架
• 创建可重用的泛型组件
• 实现复杂的类型推断逻辑
• 设计类型安全的API客户端
• 构建表单验证系统
• 创建强类型配置对象
• 实现类型安全的状态管理
• 将JavaScript代码库迁移到TypeScript

核心概念

1. 泛型

目的： 创建可重用、类型灵活的组件，同时保持类型安全。

基本泛型函数：

function identity<T>(value: T): T {
  return value;
}

const num = identity<number>(42);        // 类型：number
const str = identity<string>("hello");    // 类型：string
const auto = identity(true);              // 类型推断：boolean

泛型约束：

interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(item: T): T {
  console.log(item.length);
  return item;
}

logLength("hello");           // 正常：字符串有长度
logLength([1, 2, 3]);         // 正常：数组有长度
logLength({ length: 10 });    // 正常：对象有长度
// logLength(42);             // 错误：数字没有长度

多个类型参数：

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

const merged = merge(
  { name: "John" },
  { age: 30 }
);
// 类型：{ name: string } & { age: number }

2. 条件类型

目的： 创建依赖于条件的类型，实现复杂的类型逻辑。

基本条件类型：

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

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

提取返回类型：

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function getUser() {
  return { id: 1, name: "John" };
}

type User = ReturnType<typeof getUser>;
// 类型：{ id: number; name: string; }

分配条件类型：

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

type StrOrNumArray = ToArray<string | number>;
// 类型：string[] | number[]

嵌套条件：

type TypeName<T> =
  T extends string ? "string" :
  T extends number ? "number" :
  T extends boolean ? "boolean" :
  T extends undefined ? "undefined" :
  T extends Function ? "function" :
  "object";

type T1 = TypeName<string>;     // "string"
type T2 = TypeName<() => void>; // "function"

3. 映射类型

目的： 通过迭代属性来转换现有类型。

基本映射类型：

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

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

type ReadonlyUser = Readonly<User>;
// 类型：{ readonly id: number; readonly name: string; }

可选属性：

type Partial<T> = {
  [P in keyof T]?: T[P];
};

type PartialUser = Partial<User>;
// 类型：{ id?: number; name?: string; }

键重映射：

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

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

type PersonGetters = Getters<Person>;
// 类型：{ getName: () => string; getAge: () => number; }

过滤属性：

type PickByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K]
};

interface Mixed {
  id: number;
  name: string;
  age: number;
  active: boolean;
}

type OnlyNumbers = PickByType<Mixed, number>;
// 类型：{ id: number; age: number; }

4. 模板字面量类型

目的： 创建基于字符串的类型，具有模式匹配和转换功能。

基本模板字面量：

type EventName = "click" | "focus" | "blur";
type EventHandler = `on${Capitalize<EventName>}`;
// 类型："onClick" | "onFocus" | "onBlur"

字符串操作：

type UppercaseGreeting = Uppercase<"hello">;  // "HELLO"
type LowercaseGreeting = Lowercase<"HELLO">;  // "hello"
type CapitalizedName = Capitalize<"john">;    // "John"
type UncapitalizedName = Uncapitalize<"John">; // "john"

路径构建：

type Path<T> = T extends object
  ? { [K in keyof T]: K extends string
      ? `${K}` | `${K}.${Path<T[K]>}`
      : never
    }[keyof T]
  : never;

interface Config {
  server: {
    host: string;
    port: number;
    ssl: {
      enabled: boolean;
      cert: string;
    };
  };
  database: {
    url: string;
    pool: {
      min: number;
      max: number;
    };
  };
}

type ConfigPath = Path<Config>;
// 类型："server" | "database" | "server.host" | "server.port" | "database.url"

5. 工具类型

内置工具类型：

// Partial<T> - 使所有属性可选
type PartialUser = Partial<User>;

// Required<T> - 使所有属性必需
type RequiredUser = Required<PartialUser>;

// Readonly<T> - 使所有属性只读
type ReadonlyUser = Readonly<User>;

// Pick<T, K> - 选择特定属性
type UserName = Pick<User, "name" | "email">;

// Omit<T, K> - 移除特定属性
type UserWithoutPassword = Omit<User, "password">;

// Exclude<T, U> - 从联合类型中排除类型
type T1 = Exclude<"a" | "b" | "c", "a">;  // "b" | "c"

// Extract<T, U> - 从联合类型中提取类型
type T2 = Extract<"a" | "b" | "c", "a" | "b">;  // "a" | "b"

// NonNullable<T> - 排除null和undefined
type T3 = NonNullable<string | null | undefined>;  // string

// Record<K, T> - 创建具有键K和值T的对象类型
type PageInfo = Record<"home" | "about", { title: string }>;

高级模式

模式1：类型安全的事件发射器

type EventMap = {
  "user:created": { id: string; name: string };
  "user:updated": { id: string };
  "user:deleted": { id: string };
};

class TypedEventEmitter<T extends Record<string, any>> {
  private listeners: {
    [K in keyof T]?: Array<(data: T[K]) => void>;
  } = {};

  on<K extends keyof T>(event: K, callback: (data: T[K]) => void): void {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event]!.push(callback);
  }

  emit<K extends keyof T>(event: K, data: T[K]): void {
    const callbacks = this.listeners[event];
    if (callbacks) {
      callbacks.forEach(callback => callback(data));
    }
  }
}

const emitter = new TypedEventEmitter<EventMap>();

emitter.on("user:created", (data) => {
  console.log(data.id, data.name);  // 类型安全！
});

emitter.emit("user:created", { id: "1", name: "John" });
// emitter.emit("user:created", { id: "1" });  // 错误：缺少'name'

模式2：类型安全的API客户端

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";

type EndpointConfig = {
  "/users": {
    GET: { response: User[] };
    POST: { body: { name: string; email: string }; response: User };
  };
  "/users/:id": {
    GET: { params: { id: string }; response: User };
    PUT: { params: { id: string }; body: Partial<User>; response: User };
    DELETE: { params: { id: string }; response: void };
  };
};

type ExtractParams<T> = T extends { params: infer P } ? P : never;
type ExtractBody<T> = T extends { body: infer B } ? B : never;
type ExtractResponse<T> = T extends { response: infer R } ? R : never;

class APIClient<Config extends Record<string, Record<HTTPMethod, any>>> {
  async request<
    Path extends keyof Config,
    Method extends keyof Config[Path]
  >(
    path: Path,
    method: Method,
    ...[options]: ExtractParams<Config[Path][Method]> extends never
      ? ExtractBody<Config[Path][Method]> extends never
        ? []
        : [{ body: ExtractBody<Config[Path][Method]> }]
      : [{
          params: ExtractParams<Config[Path][Method]>;
          body?: ExtractBody<Config[Path][Method]>;
        }]
  ): Promise<ExtractResponse<Config[Path][Method]>> {
    // 实现在这里
    return {} as any;
  }
}

const api = new APIClient<EndpointConfig>();

// 类型安全的API调用
const users = await api.request("/users", "GET");
// 类型：User[]

const newUser = await api.request("/users", "POST", {
  body: { name: "John", email: "john@example.com" }
});
// 类型：User

const user = await api.request("/users/:id", "GET", {
  params: { id: "123" }
});
// 类型：User

模式3：类型安全的构建器模式

type BuilderState<T> = {
  [K in keyof T]: T[K] | undefined;
};

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

type OptionalKeys<T> = {
  [K in keyof T]-?: {} extends Pick<T, K> ? K : never;
}[keyof T];

type IsComplete<T, S> =
  RequiredKeys<T> extends keyof S
    ? S[RequiredKeys<T>] extends undefined
      ? false
      : true
    : false;

class Builder<T, S extends BuilderState<T> = {}> {
  private state: S = {} as S;

  set<K extends keyof T>(
    key: K,
    value: T[K]
  ): Builder<T, S & Record<K, T[K]>> {
    this.state[key] = value;
    return this as any;
  }

  build(
    this: IsComplete<T, S> extends true ? this : never
  ): T {
    return this.state as T;
  }
}

interface User {
  id: string;
  name: string;
  email: string;
  age?: number;
}

const builder = new Builder<User>();

const user = builder
  .set("id", "1")
  .set("name", "John")
  .set("email", "john@example.com")
  .build();  // 正常：所有必需字段已设置

// const incomplete = builder
//   .set("id", "1")
//   .build();  // 错误：缺少必需字段

模式4：深层只读/可选

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object
    ? T[P] extends Function
      ? T[P]
      : DeepReadonly<T[P]>
    : T[P];
};

type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object
    ? T[P] extends Array<infer U>
      ? Array<DeepPartial<U>>
      : DeepPartial<T[P]>
    : T[P];
};

interface Config {
  server: {
    host: string;
    port: number;
    ssl: {
      enabled: boolean;
      cert: string;
    };
  };
  database: {
    url: string;
    pool: {
      min: number;
      max: number;
    };
  };
}

type ReadonlyConfig = DeepReadonly<Config>;
// 所有嵌套属性都是只读的

type PartialConfig = DeepPartial<Config>;
// 所有嵌套属性都是可选的

模式5：类型安全的表单验证

type ValidationRule<T> = {
  validate: (value: T) => boolean;
  message: string;
};

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

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

class FormValidator<T extends Record<string, any>> {
  constructor(private rules: FieldValidation<T>) {}

  validate(data: T): ValidationErrors<T> | null {
    const errors: ValidationErrors<T> = {};
    let hasErrors = false;

    for (const key in this.rules) {
      const fieldRules = this.rules[key];
      const value = data[key];

      if (fieldRules) {
        const fieldErrors: string[] = [];

        for (const rule of fieldRules) {
          if (!rule.validate(value)) {
            fieldErrors.push(rule.message);
          }
        }

        if (fieldErrors.length > 0) {
          errors[key] = fieldErrors;
          hasErrors = true;
        }
      }
    }

    return hasErrors ? errors : null;
  }
}

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

const validator = new FormValidator<LoginForm>({
  email: [
    {
      validate: (v) => v.includes("@"),
      message: "Email必须包含@"
    },
    {
      validate: (v) => v.length > 0,
      message: "Email是必需的"
    }
  ],
  password: [
    {
      validate: (v) => v.length >= 8,
      message: "密码必须至少8个字符"
    }
  ]
});

const errors = validator.validate({
  email: "invalid",
  password: "short"
});
// 类型：{ email?: string[]; password?: string[]; } | null

模式6：可辨识联合

type Success<T> = {
  status: "success";
  data: T;
};

type Error = {
  status: "error";
  error: string;
};

type Loading = {
  status: "loading";
};

type AsyncState<T> = Success<T> | Error | Loading;

function handleState<T>(state: AsyncState<T>): void {
  switch (state.status) {
    case "success":
      console.log(state.data);  // 类型：T
      break;
    case "error":
      console.log(state.error);  // 类型：string
      break;
    case "loading":
      console.log("加载中...");
      break;
  }
}

// 类型安全的状态机
type State =
  | { type: "idle" }
  | { type: "fetching"; requestId: string }
  | { type: "success"; data: any }
  | { type: "error"; error: Error };

type Event =
  | { type: "FETCH"; requestId: string }
  | { type: "SUCCESS"; data: any }
  | { type: "ERROR"; error: Error }
  | { type: "RESET" };

function reducer(state: State, event: Event): State {
  switch (state.type) {
    case "idle":
      return event.type === "FETCH"
        ? { type: "fetching", requestId: event.requestId }
        : state;
    case "fetching":
      if (event.type === "SUCCESS") {
        return { type: "success", data: event.data };
      }
      if (event.type === "ERROR") {
        return { type: "error", error: event.error };
      }
      return state;
    case "success":
    case "error":
      return event.type === "RESET" ? { type: "idle" } : state;
  }
}

类型推断技术

1. Infer关键字

// 提取数组元素类型
type ElementType<T> = T extends (infer U)[] ? U : never;

type NumArray = number[];
type Num = ElementType<NumArray>;  // number

// 提取Promise类型
type PromiseType<T> = T extends Promise<infer U> ? U : never;

type AsyncNum = PromiseType<Promise<number>>;  // number

// 提取函数参数
type Parameters<T> = T extends (...args: infer P) => any ? P : never;

function foo(a: string, b: number) {}
type FooParams = Parameters<typeof foo>;  // [string, number]

2. 类型守卫

function isString(value: unknown): value is string {
  return typeof value === "string";
}

function isArrayOf<T>(
  value: unknown,
  guard: (item: unknown) => item is T
): value is T[] {
  return Array.isArray(value) && value.every(guard);
}

const data: unknown = ["a", "b", "c"];

if (isArrayOf(data, isString)) {
  data.forEach(s => s.toUpperCase());  // 类型：string[]
}

3. 断言函数

function assertIsString(value: unknown): asserts value is string {
  if (typeof value !== "string") {
    throw new Error("不是字符串");
  }
}

function processValue(value: unknown) {
  assertIsString(value);
  // value现在被类型化为字符串
  console.log(value.toUpperCase());
}

最佳实践

1. 使用unknown而非any：强制类型检查
2. 优先使用interface表示对象形状：更好的错误信息
3. 使用type表示联合和复杂类型：更灵活
4. 利用类型推断：尽可能让TypeScript推断
5. 创建辅助类型：构建可重用的类型工具
6. 使用const断言：保留字面量类型
7. 避免类型断言：使用类型守卫替代
8. 文档化复杂类型：添加JSDoc注释
9. 使用严格模式：启用所有严格编译器选项
10. 测试类型：使用类型测试验证类型行为

类型测试

// 类型断言测试
type AssertEqual<T, U> =
  [T] extends [U]
    ? [U] extends [T]
      ? true
      : false
    : false;

type Test1 = AssertEqual<string, string>;        // true
type Test2 = AssertEqual<string, number>;        // false
type Test3 = AssertEqual<string | number, string>; // false

// 期望错误助手
type ExpectError<T extends never> = T;

// 示例用法
type ShouldError = ExpectError<AssertEqual<string, number>>;

常见陷阱

1. 过度使用any：破坏了TypeScript的目的
2. 忽略严格空检查：可能导致运行时错误
3. 类型过于复杂：可能减慢编译速度
4. 不使用可辨识联合：错过类型收窄机会
5. 忘记只读修饰符：允许意外突变
6. 循环类型引用：可能导致编译器错误
7. 不处理边界情况：如空数组或null值

性能考虑

• 避免深度嵌套的条件类型
• 尽可能使用简单类型
• 缓存复杂的类型计算
• 限制递归类型中的递归深度
• 使用构建工具在生产中跳过类型检查

资源

• TypeScript手册：https://www.typescriptlang.org/docs/handbook/
• 类型挑战：https://github.com/type-challenges/type-challenges
• TypeScript深度解析：https://basarat.gitbook.io/typescript/
• Effective TypeScript：Dan Vanderkam的书籍