折腾侠
技术教程

TypeScript 高级类型技巧：从入门到实战

本文深入探讨 TypeScript 高级类型技巧，涵盖泛型、条件类型、映射类型、模板字面量类型等核心概念。通过丰富的代码示例，展示如何在真实项目中应用这些技巧构建类型安全的 API 客户端。文章从基础到进阶，帮助开发者掌握 TypeScript 类型系统的精髓，提升代码的可维护性和安全性。适合有一定 TypeScript 基础、希望深入理解类型系统的开发者阅读。

折
折腾侠
2026/04/25 发布
0约 11 分钟1289 字 / 1445 词00

TypeScript 高级类型技巧：从入门到实战

引言

TypeScript 作为 JavaScript 的超集，近年来在前端开发领域占据了越来越重要的地位。它通过静态类型系统帮助开发者在编译阶段发现错误，提高代码的可维护性和可读性。然而，很多开发者只使用了 TypeScript 的基础类型功能，对其强大的高级类型技巧知之甚少。

本文将深入探讨 TypeScript 中的高级类型技巧，包括泛型、条件类型、映射类型、类型推断等核心概念，并通过实际代码示例展示如何在真实项目中应用这些技巧。无论你是 TypeScript 初学者还是有一定经验的开发者，相信都能从本文中获得启发。

一、泛型：类型系统的基石

1.1 泛型基础

泛型（Generics）是 TypeScript 中最重要的高级类型特性之一。它允许我们创建可重用的、类型安全的组件，同时保持类型的灵活性。

TypeScript
// 基础泛型函数
function identity<T>(arg: T): T {
  return arg;
}

// 使用示例
const str = identity<string>("Hello");  // 类型：string
const num = identity<number>(42);        // 类型：number

// 类型推断 - 可以省略类型参数
const inferred = identity("TypeScript"); // 自动推断为 string

1.2 多参数泛型

泛型可以接受多个类型参数，这在处理复杂数据结构时非常有用：

TypeScript
// 键值对容器
interface KeyValuePair<K, V> {
  key: K;
  value: V;
}

// 使用示例
const userEntry: KeyValuePair<string, number> = {
  key: "userId",
  value: 12345
};

// 泛型约束 - 限制类型参数的范围
interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise>(arg: T): T {
  console.log(`Length: ${arg.length}`);
  return arg;
}

// 有效调用
logLength("Hello");           // string 有 length 属性
logLength([1, 2, 3]);         // array 有 length 属性
logLength({ length: 10 });    // 对象有 length 属性

// 无效调用 - 编译错误
// logLength(42);             // number 没有 length 属性

1.3 泛型类

泛型不仅可以用于函数和接口，还可以用于类：

TypeScript
class Stack<T> {
  private items: T[] = [];
  
  push(item: T): void {
    this.items.push(item);
  }
  
  pop(): T | undefined {
    return this.items.pop();
  }
  
  peek(): T | undefined {
    return this.items[this.items.length - 1];
  }
  
  isEmpty(): boolean {
    return this.items.length === 0;
  }
  
  size(): number {
    return this.items.length;
  }
}

// 使用示例
const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
numberStack.push(3);
console.log(numberStack.pop()); // 输出：3

const stringStack = new Stack<string>();
stringStack.push("Hello");
stringStack.push("World");

二、条件类型：动态类型推导

2.1 条件类型基础

条件类型允许我们根据类型参数的条件来选择不同的类型，类似于三元运算符在类型层面的应用：

TypeScript
// 基础语法：T extends U ? X : Y
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 : any;

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

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

2.2 infer 关键字

INLINE_CODE_0 关键字用于在条件类型中推断类型变量，是条件类型的核心：

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

type A = ElementType<string[]>;    // string
type B = ElementType<number[]>;    // number
type C = ElementType<[boolean, string]>; // boolean | string

// 提取 Promise 的解析类型
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type A = UnwrapPromise<Promise<string>>;  // string
type B = UnwrapPromise<string>;           // string

// 提取函数的参数类型
type FirstParameter<T> = T extends (arg1: infer P, ...args: any[]) => any ? P : never;

type A = FirstParameter<(name: string, age: number) => void>;  // string

2.3 分布式条件类型

当条件类型作用于联合类型时，会自动分布到每个成员上：

TypeScript
// 分布式条件类型示例
type ToArray<T> = T extends any ? T[] : never;

type A = ToArray<string | number>;  // string[] | number[]
// 而不是 (string | number)[]

// 利用分布式特性过滤类型
type FilterStrings<T> = T extends string ? never : T;

type A = FilterStrings<string | number | boolean>;  // number | boolean

// 实际应用：排除 null 和 undefined
type NonNullable<T> = T extends null | undefined ? never : T;

type A = NonNullable<string | number | null | undefined>;  // string | number

三、映射类型：批量转换类型

3.1 映射类型基础

映射类型允许我们基于现有类型创建新类型，通过遍历属性的键来转换类型：

TypeScript
// 基础映射类型
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

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

type ReadonlyUser = Readonly<User>;
// 等价于：
// {
//   readonly id: number;
//   readonly name: string;
//   readonly email: string;
// }

// Partial - 将所有属性变为可选
type Partial<T> = {
  [P in keyof T]?: T[P];
};

// Required - 将所有属性变为必填
type Required<T> = {
  [P in keyof T]-?: T[P];
};

// Pick - 选择特定属性
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

type UserId = Pick<User, 'id'>;  // { id: number }

// Omit - 排除特定属性
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

type UserWithoutEmail = Omit<User, 'email'>;  // { id: number; name: string }

3.2 键的映射修饰

TypeScript 4.1+ 支持对映射类型的键进行转换：

TypeScript
// 将属性名转换为大写
type UppercaseKeys<T> = {
  [K in keyof T as Uppercase<string & K>]: T[K];
};

interface Config {
  apiUrl: string;
  timeout: number;
  retries: number;
}

type UpperConfig = UppercaseKeys<Config>;
// {
//   APIURL: string;
//   TIMEOUT: number;
//   RETRIES: number;
// }

// 过滤特定类型的属性
type FilterByType<T, V> = {
  [K in keyof T as T[K] extends V ? K : never]: T[K];
};

type StringOnly = FilterByType<Config, string>;  // { apiUrl: string }
type NumberOnly = FilterByType<Config, number>;  // { timeout: number; retries: number }

四、模板字面量类型：强大的字符串操作

4.1 基础用法

模板字面量类型允许我们在类型层面操作字符串：

TypeScript
// 基础模板字面量类型
type Greeting = `Hello, ${string}`;

const greeting1: Greeting = "Hello, World";  // ✓
const greeting2: Greeting = "Hi, World";     // ✗ 编译错误

// 联合类型的组合
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
type ApiEndpoint = `/api/${string}`;
type ApiRequest = `${HttpMethod} ${ApiEndpoint}`;

const request1: ApiRequest = "GET /api/users";     // ✓
const request2: ApiRequest = "POST /api/users";    // ✓
const request3: ApiRequest = "PATCH /api/users";   // ✗ 编译错误

4.2 实际应用场景

TypeScript
// 事件命名规范
type EventName<T extends string> = `${T}Changed` | `${T}Updated` | `${T}Deleted`;

type UserEvents = EventName<"user">;
// "userChanged" | "userUpdated" | "userDeleted"

// CSS 属性类型
type CSSProperties = {
  [K in keyof CSSStyleDeclaration as K extends `on${string}` ? never : K]?: 
    CSSStyleDeclaration[K];
};

// 状态管理中的 Action 类型
type ActionType = "FETCH" | "CREATE" | "UPDATE" | "DELETE";
type ResourceType = "User" | "Post" | "Comment";
type Action = `${ActionType}_${ResourceType}`;

// "FETCH_User" | "CREATE_User" | "UPDATE_User" | "DELETE_User" |
// "FETCH_Post" | "CREATE_Post" | "UPDATE_Post" | "DELETE_Post" |
// "FETCH_Comment" | "CREATE_Comment" | "UPDATE_Comment" | "DELETE_Comment"

五、实战应用：构建类型安全的 API 客户端

5.1 定义 API 响应类型

TypeScript
// 基础响应结构
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
  timestamp: string;
}

// 分页响应
type PaginatedResponse<T> = ApiResponse<{
  items: T[];
  total: number;
  page: number;
  pageSize: number;
  totalPages: number;
}>;

// 用户相关类型
interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user" | "guest";
  createdAt: string;
  updatedAt: string;
}

// 文章相关类型
interface Post {
  id: number;
  title: string;
  content: string;
  authorId: number;
  tags: string[];
  published: boolean;
  createdAt: string;
}

5.2 类型安全的 API 客户端

TypeScript
// API 路由定义
type ApiRoutes = {
  "GET /users": { response: ApiResponse<User[]> };
  "GET /users/:id": { params: { id: number }; response: ApiResponse<User> };
  "POST /users": { body: { name: string; email: string }; response: ApiResponse<User> };
  "PUT /users/:id": { params: { id: number }; body: Partial<User>; response: ApiResponse<User> };
  "DELETE /users/:id": { params: { id: number }; response: ApiResponse<{ success: boolean }> };
  
  "GET /posts": { response: PaginatedResponse<Post> };
  "GET /posts/:id": { params: { id: number }; response: ApiResponse<Post> };
  "POST /posts": { body: { title: string; content: string; tags: string[] }; response: ApiResponse<Post> };
};

// 提取请求参数的辅助类型
type ExtractParams<T> = T extends { params: infer P } ? P : {};
type ExtractBody<T> = T extends { body: infer B } ? B : never;
type ExtractResponse<T> = T extends { response: infer R } ? R : never;

// 类型安全的 fetch 函数
class ApiClient {
  private baseUrl: string;
  
  constructor(baseUrl: string) {
    this.baseUrl = baseUrl;
  }
  
  async request<Route extends keyof ApiRoutes>(
    method: Route extends `${infer M} ${string}` ? M : never,
    path: Route extends `${string} ${infer P}` ? P : never,
    options: {
      params?: ExtractParams<ApiRoutes[Route]>;
      body?: ExtractBody<ApiRoutes[Route]>;
    } = {}
  ): Promise<ExtractResponse<ApiRoutes[Route]>> {
    // 实现细节...
    const url = this.buildUrl(path, options.params);
    const response = await fetch(`${this.baseUrl}${url}`, {
      method,
      body: options.body ? JSON.stringify(options.body) : undefined,
      headers: { "Content-Type": "application/json" },
    });
    return response.json();
  }
  
  private buildUrl(path: string, params?: Record<string, any>): string {
    if (!params) return path;
    return path.replace(/:(\w+)/g, (_, key) => params[key]?.toString() || "");
  }
}

// 使用示例
const api = new ApiClient("https://api.example.com");

// 类型安全 - 正确的调用
async function example() {
  const users = await api.request("GET", "/users");
  console.log(users.data);  // User[]
  
  const user = await api.request("GET", "/users/:id", { params: { id: 1 } });
  console.log(user.data.name);  // string
  
  const newUser = await api.request("POST", "/users", {
    body: { name: "Alice", email: "alice@example.com" }
  });
  
  // 类型错误 - 会提示缺少必要的 body 字段
  // await api.request("POST", "/users", {
  //   body: { name: "Bob" }  // 缺少 email 字段
  // });
  
  // 类型错误 - 路由不存在
  // await api.request("GET", "/invalid-route");
}

六、性能优化与最佳实践

6.1 避免过度复杂的类型

虽然 TypeScript 的类型系统很强大，但过度复杂的类型会影响编译性能：

TypeScript
// 不推荐 - 过度嵌套的递归类型
type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
};

// 推荐 - 使用内置工具类型
type ReadonlyDeep<T> = Readonly<{
  [K in keyof T]: T[K] extends object ? ReadonlyDeep<T[K]> : T[K];
}>;

6.2 使用类型别名提高可读性

TypeScript
// 不推荐 - 直接在函数签名中使用复杂类型
function process(
  data: { id: number; name: string; email: string } | 
        { id: string; name: string; email: string }
): void {}

// 推荐 - 使用类型别名
type UserWithNumberId = { id: number; name: string; email: string };
type UserWithStringId = { id: string; name: string; email: string };
type User = UserWithNumberId | UserWithStringId;

function process(data: User): void {}

6.3 利用类型守卫缩小类型范围

TypeScript
// 自定义类型守卫
function isString(value: unknown): value is string {
  return typeof value === "string";
}

function processValue(value: string | number | boolean) {
  if (isString(value)) {
    // value 的类型被缩小为 string
    return value.toUpperCase();
  }
  if (typeof value === "number") {
    // value 的类型被缩小为 number
    return value.toFixed(2);
  }
  // value 的类型被缩小为 boolean
  return value ? "yes" : "no";
}

结语

TypeScript 的高级类型技巧是构建大型、可维护项目的重要工具。通过掌握泛型、条件类型、映射类型和模板字面量类型等核心概念，我们可以创建更加类型安全、可重用且易于维护的代码。

本文介绍的技巧只是 TypeScript 类型系统的冰山一角。随着 TypeScript 的不断发展，新的类型特性也在持续加入。建议开发者在实际项目中多加练习，逐步掌握这些高级技巧，让 TypeScript 真正成为提升代码质量的利器。

记住，类型系统的最终目的是帮助开发者更好地理解和维护代码，而不是增加复杂性。在实际应用中，应该在类型安全和代码可读性之间找到平衡点，根据项目需求选择合适的类型策略。

标签
#TypeScript
#技术教程
分享到：

如果这篇文章对你有帮助，欢迎请作者喝杯咖啡 ☕

加载评论中...