--- theme: smartblue --- `TypeScript` 是现代 `JavaScript` 开发中不可或缺的工具，它提供了类型安全和丰富的特性。许多开发者掌握了基本用法，但还有一些鲜为人知的技巧可以让你的代码更高效、干净且易于维护。接下来，让我们深入探讨每位开发者应该了解的20个 `TypeScript` 技巧，附带示例和实用建议！ 1. **非空类型 (`NonNullable`)** `NonNullable` 工具类型可以消除类型中的 `null` 和 `undefined`，帮助你避免空值问题。 ```typescript type User = { name: string; age?: number | null }; const user: NonNullable = 30; // 不允许 null 或 undefined ``` 1. **使用 `Partial` 增强灵活性** `Partial` 将类型中的所有属性设为可选，非常适合更新对象字段的子集。 ```typescript interface User { name: string; age: number; email: string; } const updateUser = (user: Partial) => { return { ...user, updatedAt: new Date() }; }; updateUser({ name: 'John' }); // 不需提供完整对象 ``` 1. **利用 `Readonly` 实现不可变数据** `Readonly` 将类型的所有属性设为只读，防止修改。 ```typescript const config: Readonly<{ apiUrl: string; retries: number }> = { apiUrl: 'https://api.example.com', retries: 5 }; // config.apiUrl = 'https://newapi.com'; // 错误：只读属性 ``` 1. **映射类型实现动态属性类型** 映射类型允许通过转换已有类型创建新类型，非常适合创建对象类型变体。 ```typescript type Status = 'loading' | 'success' | 'error'; type ApiResponse = { [K in Status]: T; }; const response: ApiResponse = { loading: '加载中...', success: '数据加载成功', error: '出现错误' }; ``` 1. **带可选元素的元组类型** `TypeScript` 支持在元组中使用可选元素，适合处理变参函数。 ```typescript type UserTuple = [string, number?, boolean?]; const user1: UserTuple = ['Alice']; // 仅名字 const user2: UserTuple = ['Bob', 30]; // 名字和年龄 const user3: UserTuple = ['Charlie', 25, true]; // 完整元组 ``` 1. **使用联合类型进行全面检查** 在 `switch` 语句中确保处理所有联合类型情况，以避免遗漏。 ```typescript type Status = 'open' | 'closed' | 'pending'; function handleStatus(status: Status) { switch (status) { case 'open': return '已打开'; case 'closed': return '已关闭'; case 'pending': return '待处理'; default: const exhaustiveCheck: never = status; // 未处理的状态类型会报错 return exhaustiveCheck; } } ``` 1. **使用 `Omit` 排除键** 使用 `Omit` 创建一个排除特定键的对象类型，方便管理。 ```typescript interface Todo { title: string; description: string; completed: boolean; } type TodoPreview = Omit; const todo: TodoPreview = { title: '学习 TypeScript', completed: false }; ``` 1. **使用 `in` 和 `instanceof` 进行类型细化** 利用 `in` 和 `instanceof` 在运行时细化类型，确保代码安全。 ```typescript function processInput(input: string | number | { title: string }) { if (typeof input === 'string') { return input.toUpperCase(); // 细化为字符串 } else if (typeof input === 'number') { return input * 2; // 细化为数字 } else if ('title' in input) { return input.title; // 细化为对象 } } ``` 1. **使用条件类型实现高级类型逻辑** 条件类型提供了灵活的类型转换。 ```typescript type IsString = T extends string ? true : false; type CheckString = IsString<'Hello'>; // true type CheckNumber = IsString<42>; // false ``` 1. **使用 `as const` 冻结字面量类型** `as const` 可以确保值被视为字面量类型，避免可变性。 ```typescript const COLORS = ['red', 'green', 'blue'] as const; type Color = typeof COLORS[number]; // 'red' | 'green' | 'blue' ``` 1. **使用 `Extract` 和 `Exclude` 精炼类型** 通过 `Extract` 和 `Exclude` 从联合类型中选择或过滤类型。 ```typescript type T = 'a' | 'b' | 'c'; type OnlyAOrB = Extract; // 'a' | 'b' type ExcludeC = Exclude; // 'a' | 'b' ``` 1. **自定义类型保护** 创建类型保护函数以动态精确化类型。 ```typescript function isString(input: any): input is string { return typeof input === 'string'; } const value: any = 'Hello'; if (isString(value)) { console.log(value.toUpperCase()); // 安全：value 是字符串 } ``` 1. **使用 `Record` 创建动态对象类型** `Record` 适合创建具有动态键的对象类型。 ```typescript type Role = 'admin' | 'user' | 'guest'; const permissions: Record = { admin: ['read', 'write', 'delete'], user: ['read', 'write'], guest: ['read'] }; ``` 1. **动态类属性与索引签名** 索引签名可以让你创建具有动态属性名的对象或类。 ```typescript class DynamicObject { [key: string]: any; } const obj = new DynamicObject(); obj.name = 'Alice'; obj.age = 30; ``` 1. **使用 `never` 类型表示不可能的状态** `never` 类型表示不应出现的值，通常用于全面检查。 ```typescript function assertNever(value: never): never { throw new Error(`意外的值: ${value}`); } ``` 1. **可选链用于安全属性访问** 可选链（`?.`）可以安全访问深层嵌套的属性。 ```typescript const user = { profile: { name: 'John' } }; const userName = user?.profile?.name; // 'John' const age = user?.profile?.age ?? '未提供'; // 默认值 ``` 1. **空值合并运算符（`??`）** 使用空值合并运算符提供默认值，仅在值为 `null` 或 `undefined` 时生效。 ```typescript const input: string | null = null; const defaultValue = input ?? '默认值'; // '默认值' ``` 1. **使用 `ReturnType` 推断返回类型** `ReturnType` 可以提取函数的返回类型，处理复杂类型时十分有用。 ```typescript function getUser() { return { name: 'John', age: 30 }; } type UserReturn = ReturnType; // { name: string; age: number; } ``` 1. **函数中的类型参数** 泛型类型参数使函数在不同类型间更灵活。 ```typescript function identity(value: T): T { return value; } identity('Hello'); // 'Hello' identity(42); // 42 ``` 1. **交叉类型用于合并结构** 交叉类型允许将多个类型合并为一个。 ```typescript type Admin = { privileges: string[] }; type User = { name: string }; type AdminUser = Admin & User; const adminUser: AdminUser = { privileges: ['admin', 'editor'], name: 'Alice' }; ``` 这些技巧将帮助你将 `TypeScript` 技能提升到新层次！🔥 尝试将这些模式融入到你的项目中，以获得更清晰、高效的代码。