每个开发人员都应该知道的 20 个 TypeScript 技巧

TypeScript 是现代 JavaScript 开发的得力助手，它引入了许多类型安全和高级功能。虽然许多开发者只掌握了基础用法，但其实 TypeScript 还隐藏了许多精华和实用技巧，它们能让你的代码更加高效、整洁且易于维护。下面，我们就通过示例和实用方法来深入了解每个开发者都应该掌握的 20 个 TypeScript 技巧。 原文同步发布在我的博客 和 公众号:龙丽坤

1.非可空类型（NonNullable） ❌

TypeScript 提供了NonNullable,排除null和undefined，它断言明确表示一个类型 不允许 为 null 或 undefined。这可以帮助您避免意外的空值。

type User = { name: string; age?: number | null }; const user: NonNullable<User["age"]> = 30; // ✅ 不允许 null或者 undefined 

2.灵活使用Partial🔧

该Partial实用程序使类型中的所有属性都成为可选的，这在您仅更新对象字段的子集时非常有用。

interface User { name: string; age: number; email: string; } const updateUser = (user: Partial<User>) => { // 你可以在这里任意添加你想要的字段 return { ...user, updatedAt: new Date() }; }; updateUser({ name: 'John' }); // 不需要全部字段 

3.利用只读类型 (Readonly)

当您需要 TypeScript 中的不变性时，Readonly使类型的所有属性都不可变，从而防止重新分配。

const config: Readonly<{ apiUrl: string; retries: number }> = { apiUrl: 'https://api.example.com', retries: 5 }; config.apiUrl = 'https://newapi.com'; // ❌ 会提示错误，因为apiUrl定义了不可变 

4. 类型的映射类型 (Mapped Types) 动态属性

映射类型可让您通过转换现有类型来创建新类型。这对于创建对象类型的变体非常方便。

type Status = 'loading' | 'success' | 'error'; type ApiResponse<T> = { [K in Status]: T; }; const response: ApiResponse<string> = { loading: 'Fetching...', success: 'Data loaded', error: 'Something went wrong' }; 

5.具有可选元素的元组类型🔢

你知道 TypeScript 允许在元组中有可选元素吗？这在处理可变函数参数时非常有用

type UserTuple = [string, number?, boolean?]; const user1: UserTuple = ['Alice']; // ✅ Just the name const user2: UserTuple = ['Bob', 30]; // ✅ Name and age const user3: UserTuple = ['Charlie', 25, true]; // ✅ Full tuple 

6.具有详尽检查的联合类型

确保使用联合类型处理所有可能的情况并在 switch 语句中进行详尽检查

type Status = 'open' | 'closed' | 'pending'; function handleStatus(status: Status) { switch (status) { case 'open': return 'Opened'; case 'closed': return 'Closed'; case 'pending': return 'Pending'; default: const exhaustiveCheck: never = status; // ❌ Error if a new status type is added but not handled return exhaustiveCheck; } } 

7.Omit：排除属性🗑️

从一个类型中移除指定属性:有时您需要创建一个排除某些键的对象类型。

interface Todo { title: string; description: string; completed: boolean; } type TodoPreview = Omit<Todo, 'description'>; const todo: TodoPreview = { title: 'Learn TypeScript', completed: false }; 

8 使用inandinstanceof缩窄类型

根据运行时条件缩小类型的范围。

function processInput(input: string | number | { title: string }) { if (typeof input === 'string') { return input.toUpperCase(); // Narrowed to string } else if (typeof input === 'number') { return input * 2; // Narrowed to number } else if ('title' in input) { return input.title; // Narrowed to object with title property } } 

9.高级类型逻辑 的条件类型

条件类型为您提供了根据条件转换类型的极大灵活性。

type IsString<T> = T extends string ? true : false; type CheckString = IsString<'Hello'>; // true type CheckNumber = IsString<42>; // false 

10.用于as const不可变字面量类型

as const非常适合冻结值并确保 TypeScript 将它们视为文字类型，而不是可变值

const COLORS = ['red', 'green', 'blue'] as const; type Color = typeof COLORS[number]; // 'red' | 'green' | 'blue' 

11.Extract 和 Exclude：提取和排除类型🧹

使用Extract和Exclude从联合中过滤出或挑选特定类型。

type T = 'a' | 'b' | 'c'; type OnlyAOrB = Extract<T, 'a' | 'b'>; // 'a' | 'b' type ExcludeC = Exclude<T, 'c'>; // 'a' | 'b' 

12.用于自定义验证的类型保护✅

创建自己的类型保护以在运行时动态地优化类型。

function isString(input: any): input is string { return typeof input === 'string'; } const value: any = 'Hello'; if (isString(value)) { console.log(value.toUpperCase()); // Safe: value is a string here } 

13.用于Record动态对象类型📋

当你需要具有动态键的对象类型时，Record<K, V>它是完美的选择

type Role = 'admin' | 'user' | 'guest'; const permissions: Record<Role, string[]> = { admin: ['read', 'write', 'delete'], user: ['read', 'write'], guest: ['read'] }; 

14.具有索引签名的动态类属性🏗️

class DynamicObject { [key: string]: any; } const obj = new DynamicObject(); obj.name = 'Alice'; obj.age = 30; 

15.never为不可能的状态输入

该never类型表示绝不应该出现的值。它通常用于穷尽检查。。

function assertNever(value: never): never { throw new Error(`Unexpected value: ${value}`); } 

16.可选链式调用，实现安全属性访问

使用可选链接（?.）可以安全地访问深层嵌套的属性，而不必担心undefined错误

const user = { profile: { name: 'John' } }; const userName = user?.profile?.name; // 'John' const age = user?.profile?.age ?? 'Not provided'; // Fallback to default 

17.具有空值合并的默认值（??） 🔄

当左侧操作数为 null 或 undefined 时，返回右侧操作数；否则返回左侧操作数本身。

const input: string | null = null; const defaultValue = input ?? 'Default'; // 'Default' 

18.使用ReturnType🔄 推断返回类型

function getUser() { return { name: 'John', age: 30 }; } type UserReturn = ReturnType<typeof getUser>; // { name: string; age: number; } 

19.函数 中的类型参数

泛型类型参数使您的函数灵活且可在不同类型之间重用。

function identity<T>(value: T): T { return value; } identity<string>('Hello'); // 'Hello' identity<number>(42); // 42 

20.结合结构的交叉类型➕

交叉类型让您可以将多种类型组合为一种。

type Admin = { privileges: string[] }; type User = { name: string }; type AdminUser = Admin & User; const adminUser: AdminUser = { privileges: ['admin', 'editor'], name: 'Alice' }; 

总结

这些技巧能帮助你写出更安全、更健壮、更易维护的 TypeScript 代码。通过灵活运用这些技巧，你可以更好地利用 TypeScript 的类型系统，提高开发效率。