每个开发人员都应该知道的 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>) => {
  // 你可以在这里任意添加你想要的字段 例如updatedAt
  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(); // 缩小为字符串
  } else if (typeof input === 'number') {
    return input * 2; // 缩小为数字
  } else if ('title' in input) {
    return input.title; // 缩小为具有 title 属性的对象
  }
}

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'; // '默认值'

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 的类型系统，提高开发效率。

微信公众号