提升编码效率，你不可不知的十个TypeScript高级特性

TypeScript 改变了开发人员编写可扩展和易于维护的 JavaScript 代码的方式。虽然静态类型和接口等基本功能已经被广泛理解，而一些高级的 TypeScript 概念还能为您的代码带来新的灵活性和强大的功能。以下是每个开发者都应该掌握的 10 个高级 TypeScript 概念，以更好地驾驭这门强大的 JavaScript 超集。

想不想加强你的JavaScript基础并掌握TypeScript?

别错过我这本 电子书：《JavaScript：从ES2015到ES2023》。这本书是现代JavaScript的终极指南，涵盖了ES模块、async/await、代理、装饰器等重要特性，还有更多内容！

此处省略部分内容

1. 泛型（类型）：释放重用性

泛型允许你创建可以适用于多种类型的组件、函数和类，同时确保严格的类型安全。这一概念让你的代码更具可重用性和健壮性。

    function wrap<T>(value: T): { value: T } {
      // 这个函数将任何值包裹在一个对象中
      return { value };
    }

    const wrappedString = wrap<string>("TypeScript"); // { value: "TypeScript" }
    // 例如，我们可以将字符串 "TypeScript" 和数字 42 包裹起来
    const wrappedNumber = wrap<number>(42); // { value: 42 }

点击全屏，点击退出全屏

对于需要灵活性和类型安全的库和框架来说，泛型是非常重要的。

此处省略内容

2. 映射类型：转换对象的结构

泛型类型允许你从现有类型创建新类型。这在创建对象类型的只读或可选版本时特别有用。

type ReadOnly<T> = {
  readonly [K in keyof T]: T[K];
};

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

type ReadOnlyUser = ReadOnly<User>; // 只读用户类型，包含只读的id和name属性。

全屏，退出全屏

这一特性是TypeScript类型转换中的关键组成部分。

……

3. 条件类型：创建动态类型

条件类型允许你根据特定条件创建动态适应的类型。它们使用 extends 关键字来指定适应的条件。

    type IsString<T> = T extends string ? "是" : "否";

    type Test1 = IsString<string>; // "是"
    type Test2 = IsString<number>; // "否"

全屏显示，退出全屏

条件类型非常适合用来定义依赖于其他类型的类型，比如自定义 API 或实用工具类型。

……

4. 键值类型和查找类型：动态访问类型信息

keyof 操作符用来创建所有对象属性键的联合类型，而动态属性查找类型可以动态地检索特定属性的类型信息。

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

type UserKeys = keyof User; // 类型UserKeys等于User的键，也就是'id'或'name'
type NameType = User["name"]; // 类型NameType等于User中的'name'属性，也就是字符串类型

进入全屏 退出全屏

这些工具在处理动态对象或创建通用实用函数时非常有用。

省略部分

5. 实用的类型：简化类型转换过程

TypeScript 包含了实用的类型，如 Partial、Pick 和 Omit，这些可以简化常见的类型转换场景。

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

    type PartialUser = Partial<User>; // 所有属性可选
    type UserIdName = Pick<User, "id" | "name">; // 只包含 id 和 name
    type NoEmailUser = Omit<User, "email">; // 没有 email 属性

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

这些实用类型可以节省时间并减少修改或调整类型时的重复工作。

……

6. 推断关键词：动态提取类型信息

infer 关键字与条件类型来推断，从给定的上下文中推断出类型。

    type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

    function getUser(): User {
      return { id: 1, name: "John", email: "john@example.com" };
    }

    // 获取用户的函数, 返回一个用户对象
    type UserReturnType = ReturnType<typeof getUser>; // 用户

全屏模式 退出全屏

这在图书馆中常用于提取并动态处理类型。

7. 交集类型和并集类型：兼具灵活性与精确性

交集类型（&）和联合类型（|）允许你定义结合或区分多种类型的复合类型。

    type Admin = { role: "admin"; permissions: string[] };
    type User = { id: number; name: string };

    type AdminUser = Admin & User; // 必须同时具备 Admin 和 User 的所有属性
    type AdminOrUser = Admin | User; // 可以是 Admin 也可能是 User

全屏模式 退出全屏

这些类型对于建立复杂数据关系模型非常关键。

8. 类型守卫：运行时细化类型

类型守卫允许你在运行时动态地限制类型。这使得处理联合类型更加安全和可预测。

    function isString(value: unknown): value 是字符串 {
      return typeof value === "string";
    }

    const value: unknown = "Hello, TypeScript";

    if (isString(value)) {
      console.log(value.toUpperCase()); // 可以安全地调用字符串方法
    }

全屏模式 退出全屏

通过优化类型，类型检查器帮助消除运行时错误。

9. 模板字面类型：创建灵活的字符串种类

模板字面类型允许通过字符串模板来创建新的字符串字面类型。

    type 事件类型 = "点击" | "悬停" | "聚焦";
    type 事件处理器 = `on${Capitalize<事件类型>}`; // "onClick" | "on悬停" | "on聚焦"

点击全屏按钮进入全屏模式，点击再次退出全屏模式

此功能特别适用于与API接口、事件处理器和模式等使用结构化字符串的方式进行处理。

10. 装饰器：用于类和方法的元编程技巧

装饰器是 TypeScript 中的一个实验性特性，允许你对类、属性、方法或参数等进行标记和修改。

    function Log(target: Object, propertyKey: string) {
      console.log(`${propertyKey}访问了`);
    }

    class Example {
      @Log
      sayHello() {
        console.log("Hello, world!");
      }
    }

点击全屏来进入全屏，点击退出来退出全屏

尽管装饰器依然处于实验阶段，它们已经在像 Angular 和 NestJS 这样的框架中被广泛用于依赖注入和元数据处理。

让你的 TypeScript 技能更上一层楼

掌握这些高级 TypeScript 概念将帮助你编写更具类型安全性、可扩展且更易维护的代码。不论你是在企业应用还是开源库上工作，这些工具将帮助你写出更清晰、高效的 TypeScript 代码。

想通过学习TypeScript来提高你的JavaScript技能吗？

来看看我的《JavaScript：从ES6到ES2023》电子书。这本书详细介绍了从ES6到ES2023的现代JavaScript特性。掌握现代JavaScript是精通TypeScript的完美基础。

👉 点击这里下载电子书 - JavaScript：从ES2015到ES2023,