提高编码效率的 10 个必知 TypeScript 功能

TypeScript 重新定义了开发人员编写可扩展且可维护的 JavaScript 代码的方式。虽然其基本功能（如静态类型和接口）已被广泛理解，但一些高级 TypeScript 概念可以为您的代码带来全新级别的灵活性和强大功能。以下是每个开发人员都应该了解的 10 个高级 TypeScript 概念，以便掌握这一强大的 JavaScript 超集。

**想要在掌握 TypeScript 的同时加强 JavaScript 基础？**

不要错过我的**电子书：JavaScript：从 ES2015 到 ES2023**。它是现代 JavaScript 的终极指南，涵盖了 ES 模块、async/await、代理、装饰器等基本功能！

1. 泛型：解锁可重用性

泛型允许您创建适用于各种类型的组件、函数和类，同时保持严格的类型安全性。此概念使您的代码可重复使用且稳健。

function wrap(value: T): { value: T } {
  return { value };
}

const wrappedString = wrap("TypeScript"); // { value: "TypeScript" }
const wrappedNumber = wrap(42); // { value: 42 }

泛型对于需要灵活性而又不损害类型安全性的库和框架至关重要。

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

映射类型允许您通过转换现有类型来创建新类型。这对于创建对象类型的只读或可选版本特别有用。

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

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

type ReadOnlyUser = ReadOnly; // { readonly id: number; readonly name: string }

此功能是 TypeScript 中类型转换的基石。

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

条件类型使您能够创建根据条件进行调整的类型。它们使用“extends”关键字来定义逻辑。

type IsString = T extends string ? "Yes" : "No";

type Test1 = IsString; // "Yes"
type Test2 = IsString; // "No"

条件类型非常适合创建依赖于其他类型的类型，例如自定义 API 或实用程序类型。

4. Keyof 和 Lookup 类型：动态访问类型

`keyof` 运算符创建对象类型中所有属性键的联合，而查找类型则动态检索特定属性的类型。

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

type UserKeys = keyof User; // "id" | "name"
type NameType = User["name"]; // string

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

5. 实用类型：简化类型转换

TypeScript 包含内置实用程序类型，例如“Partial”、“Pick”和“Omit”，可简化常见的类型转换。

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

type PartialUser = Partial; // All properties are optional
type UserIdName = Pick; // Only id and name
type NoEmailUser = Omit; // All properties except email

这些实用程序类型在修改或调整类型时可以节省时间并减少样板。

6. Infer 关键字：动态提取类型

`infer` 关键字与条件类型一起用来从给定上下文推断类型。

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

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

type UserReturnType = ReturnType; // User

这通常在库中用于动态提取和操作类型。

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

交叉类型（“&”）和联合类型（“|”）允许您定义组合或区分多种类型的类型。

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

type AdminUser = Admin & User; // Must include both Admin and User properties
type AdminOrUser = Admin | User; // Can be either Admin or User

这些类型对于建模复杂的数据关系至关重要。

8. 类型保护：在运行时细化类型

类型保护允许您在运行时动态缩小类型范围。这使得使用联合类型更安全、更可预测。

function isString(value: unknown): value is string {
  return typeof value === "string";
}

const value: unknown = "Hello, TypeScript";

if (isString(value)) {
  console.log(value.toUpperCase()); // Safe to call string methods
}

通过改进类型，类型保护有助于消除运行时错误。

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

模板文字类型允许使用字符串模板构造新的字符串文字类型。

type EventType = "click" | "hover" | "focus";
type EventHandler = `on${Capitalize}`; // "onClick" | "onHover" | "onFocus"

此功能对于使用结构化方式使用字符串的 API、事件处理程序和模式特别有用。

10. 装饰器：类和方法的元编程

装饰器是 TypeScript 中的一项实验性功能，允许您注释和修改类、属性、方法或参数。

function Log(target: Object, propertyKey: string) {
  console.log(`${propertyKey} was accessed`);
}

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

尽管装饰器仍处于实验阶段，但它们已广泛用于 Angular 和 NestJS 等框架中的依赖注入和元数据处理。

将您的 TypeScript 技能提升到新的水平

掌握这些高级 TypeScript 概念将帮助您编写更类型安全、可扩展且更易于维护的代码。无论您是在开发企业级应用程序还是开源库，这些工具都可以帮助您编写更简洁、更高效的 TypeScript。

CLIS.CC