20 个每个开发者都应该知道的 TypeScript 技巧 ??

TypeScript 是现代 JavaScript 开发中的强大工具，提供了 类型安全性 和高级功能。
虽然许多开发人员了解基础知识，但还有一些隐藏的宝藏和实用技巧可以使您的代码更高效、更整洁且更易于维护。
让我们来看看每个开发人员都应该知道的 20 个 TypeScript 技巧，附带示例和实用技巧！ 💻

……

1. 不可为空类型 (NonNullable)

TypeScript 提供了 NonNullable 工具类型来从类型中移除 null 和 undefined。这可以帮助你避免意外遇到 null 值。

    type User = { name: string; age?: number | null };
    const user: NonNullable<User["age"]> = 30; // ✅ 不允许为 null 或 undefined，这里强制 user.age 必须是一个具体的数值

全屏，退出全屏

……

2. 使用 Partial 增强灵活性

Partial<T> 使一个类型中的所有属性成为可选的，特别是当你只想更新对象的部分字段时，这非常方便。

    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<T> 将类型的所有属性设为只读，防止重新赋值操作，从而保证了数据的不可变性。

    const config: { apiUrl: string; retries: number } = {
      apiUrl: 'https://api.example.com',
      retries: 5
    } as Readonly<{ apiUrl: string; retries: number }>;

    config.apiUrl = 'https://newapi.com'; // ❌ 错误：无法修改 'apiUrl'，因为它是一个只读属性

进入全屏模式
退出全屏模式

此处无内容可译。

4. 动态属性映射类型 🛠️

衍生类型允许你通过转换现有类型来创建新的类型。这在创建对象类型的变体时很有帮助。

    type Status = '加载中' | '成功' | '失败';
    type ApiResponse<T> = {
      [K in Status]: T;
    };

    const response: ApiResponse<string> = {
      加载中: '正在加载数据...',
      成功: '数据加载完毕',
      失败: '出点问题了'
    };

点一下全屏，再点一下退出全屏

此处略去部分内容

5. 包含可选元素的元组类型

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

    type UserTuple = [string, number?, boolean?];

    const user1: UserTuple = ['Alice'];          // ✅ 仅名字
    const user2: UserTuple = ['Bob', 30];        // ✅ 名字和岁数
    const user3: UserTuple = ['Charlie', 25, true]; // ✅ 完整的信息

全屏模式, 退出全屏

……

6. 带有完整检查的联合类型 查找🔍

确保你正在使用联合体类型，并在switch语句中的情况检查来处理所有可能的情形。

    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;
      }
    }

全屏 退出全屏

……

7. Utility 类型 Omit 用于排除键值对 🗑️

有时候，你可能需要创建一个某些键无效的对象类型。这时，Omit 就能帮上你的忙了！

    interface Todo {
      title: string;
      description: string;
      completed: boolean;
    }

    type TodoPreview = Omit<Todo, 'description'>; // 排除 description 的 Todo 类型

    const todo: TodoPreview = {
      title: '学学 TypeScript',
      completed: false
    };

全屏模式 退出全屏

8. 使用 in 和 instanceof 来缩小类型范围 🕵️

可以使用 in 和 instanceof 在运行时确定对象的类型。

    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. 高级类型逻辑中的条件类别 🔄

条件类型功能使你可以根据条件具有惊人的灵活性来转换数据类型。

类型 IsString<T> 定义为 T 是否为字符串类型，如果是则返回 true，否则返回 false。

类型 CheckString 等于 IsString<'Hello'>，结果为 true。
类型 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'

全屏 全屏退出

关注我在GitHub上:

"最好的错误提示就是永远不要出现的。" - Jagroop2001

11. 通过提取和排除来精简类型 🧹

使用 提取 和 排除 来从中筛选或选择特定内容。

    type T = 'a' | 'b' | 'c';
    type OnlyAOrB = Extract<T, 'a' | 'b'>; // 提取 'a' 或 'b'
    // 只包含 'a' 或 'b'
    type ExcludeC = Exclude<T, 'c'>; // 排除 'c' 后的结果
    // 结果为 'a' 或 'b'

进入全屏 退出全屏

12. 用于自定义验证的类型守卫 ✅

自己创建类型检查器，这样可以动态地在运行时细化类型信息。

    function isString(input: any): input 是字符串 {
      return typeof input === 'string';
    }

    const value: any = 'Hello';

    if (isString(value)) {
      console.log(value.toUpperCase()); // 安全：这里的 value 确实是字符串
    }

切换到全屏模式 退出全屏

13. 用Record来定义动态对象类型 📋

当你需要为一个具有动态键的对象定义类型时，Record<K, V>（键为 K，值为 V 的记录）非常合适。

    type 角色 = '管理员' | '用户' | '访客';
    const 权限: Record<角色, string[]> = {
      管理员: ['读取', '写入', '删除'],
      用户: ['读取', '写入'],
      访客: ['读取']
    };

进入全屏 退出全屏

14. 使用索引签名的动态类属性特性 🏗️

索引签名特性让你能创建具有动态属性名称的对象或类。

    class 动态类 {
      // 允许动态添加任何类型的属性
      [key: string]: any;
    }

    const obj = new 动态类();
    // 对象
    obj.name = 'Alice'; // 名称
    obj.age = 30; // 年龄

切换到全屏，切换回正常模式

15..\ never 从不用于不可能的情况 🚫

never 类型表示永远不应该出现的值。例如，它常用于全面检查。

    function assertNever(value: never): never {
      // 确保永远不会遇到这个值
      throw new Error(`遇到了未预料的值: ${value}`);
    }

进入全屏模式，退出全屏

16. 用于安全属性访问的可选链 🔗

使用可选链 (?.)，你可以安全地访问深层嵌套的属性值，而不用担心因 undefined 导致的错误。

    const user = { profile: { name: 'John' } };
    const userName = user?.profile?.name; // 'John'
    const age = user?.profile?.age ?? '未指定'; // 回退到默认值

切换到全屏模式，退出全屏

17. 空值合并 (??) 提供默认值 🔄

使用空值合并操作符，当原始值是 null 或 undefined 时，提供一个替代值。

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

全屏；退出全屏

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

The ReturnType<T> 类型可以提取函数的返回类型，处理复杂类型时很有帮助。这里，它会非常有用。

函数getUser() {
  return { name: 'John', age: 30 };
}

类型UserReturn = ReturnType<typeof getUser>; // { 名字: string; 年龄: number; }

要进入全屏，请按这里；要退出，请按这里

19. 函数类型泛型参数 🧑‍💻

泛型类型参数让您的函数在处理不同类型的数据时更加灵活且易于重用。

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

    // 以下是一个简单的泛型函数示例：
    identity<string>('Hello'); // “Hello”
    identity<number>(42); // 结果是 42

全屏播放；退出全屏

20. 交叉类型用于组合结构 ➕

交叉类型让你可以将多种类型合并在一个类型中。

    type Admin = { 权限列表: string[] };
    type User = { 名字: string };

    type AdminUser = 管理员用户;

    const adminUser: 管理员用户 = {
      权限列表: ['admin', 'editor'],
      名字: 'Alice'
    };

全屏 退出全屏

这些小技巧能让你将 TypeScript 技能提升到下一个层次！🔥 不断尝试并将这些模式和技巧应用到你的项目中，写出更干净高效的代码。祝你编程愉快！😎👨‍💻