跳到主要内容

TypeScript 类型安全模式

介绍​

TypeScript 是一种强类型的 JavaScript 超集，它通过类型系统帮助开发者在编写代码时捕获潜在的错误。类型安全模式是 TypeScript 中的一种编程实践，旨在通过类型约束和类型推断来确保代码的健壮性和可维护性。本文将介绍几种常见的类型安全模式，并通过示例展示它们的实际应用。

1. 类型别名与接口​

类型别名（Type Aliases）​

类型别名允许你为复杂的类型定义一个简短的名称。这在处理联合类型或交叉类型时非常有用。

typescript
type StringOrNumber = string | number;

function printValue(value: StringOrNumber) {
  console.log(value);
}

printValue("Hello"); // 输出: Hello
printValue(42);      // 输出: 42

接口（Interfaces）​

接口用于定义对象的形状，确保对象具有特定的属性和方法。

typescript
interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  console.log(`Hello, ${person.name}`);
}

greet({ name: "Alice", age: 30 }); // 输出: Hello, Alice
提示

类型别名和接口都可以用来定义对象的形状，但接口更适合用于定义类的公共 API，而类型别名更适合用于联合类型或交叉类型。

2. 类型守卫（Type Guards）​

类型守卫是一种运行时检查，用于确保变量在特定代码块中具有特定的类型。

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

function printLength(value: string | number) {
  if (isString(value)) {
    console.log(value.length); // 这里 value 被推断为 string 类型
  } else {
    console.log(value.toFixed(2)); // 这里 value 被推断为 number 类型
  }
}

printLength("Hello"); // 输出: 5
printLength(3.14159); // 输出: 3.14
备注

类型守卫可以帮助你在运行时确保变量的类型，从而避免类型错误。

3. 类型断言（Type Assertions）​

类型断言允许你手动指定变量的类型，通常在你知道变量的类型比 TypeScript 推断的更具体时使用。

typescript
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

console.log(strLength); // 输出: 16
警告

类型断言不会改变变量的实际类型，它只是告诉 TypeScript 你确信变量的类型是什么。滥用类型断言可能会导致运行时错误。

4. 映射类型（Mapped Types）​

映射类型允许你基于现有类型创建新类型，通常用于批量修改类型的属性。

typescript
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = Readonly<Person>;

const person: ReadonlyPerson = {
  name: "Alice",
  age: 30,
};

// person.name = "Bob"; // 错误: 无法分配到 "name" ，因为它是只读属性
提示

映射类型非常适合用于创建不可变对象或批量修改对象属性。

5. 条件类型（Conditional Types）​

条件类型允许你根据条件选择不同的类型，通常用于泛型编程中。

typescript
type IsString<T> = T extends string ? true : false;

type A = IsString<"hello">; // true
type B = IsString<42>;      // false
备注

条件类型可以帮助你根据输入类型动态选择输出类型，非常适合用于复杂的泛型场景。

实际应用场景​

场景 1: 表单验证​

在表单验证中，类型安全模式可以帮助你确保输入数据的类型正确。

typescript
interface FormData {
  username: string;
  password: string;
  age: number;
}

function validateForm(data: FormData) {
  if (typeof data.username !== "string") {
    throw new Error("Username must be a string");
  }
  if (typeof data.password !== "string") {
    throw new Error("Password must be a string");
  }
  if (typeof data.age !== "number") {
    throw new Error("Age must be a number");
  }
}

const formData: FormData = {
  username: "Alice",
  password: "secret",
  age: 30,
};

validateForm(formData); // 通过验证

场景 2: API 响应处理​

在处理 API 响应时，类型安全模式可以帮助你确保响应的数据结构符合预期。

typescript
interface ApiResponse<T> {
  data: T;
  status: number;
}

function handleResponse<T>(response: ApiResponse<T>) {
  if (response.status === 200) {
    return response.data;
  } else {
    throw new Error("API request failed");
  }
}

const response: ApiResponse<string> = {
  data: "Success",
  status: 200,
};

console.log(handleResponse(response)); // 输出: Success

总结​

TypeScript 的类型安全模式通过类型系统帮助开发者在编写代码时捕获潜在的错误，提升代码的健壮性和可维护性。本文介绍了类型别名、接口、类型守卫、类型断言、映射类型和条件类型等常见模式，并通过实际应用场景展示了它们的用途。

附加资源与练习​

  • 练习 1: 尝试定义一个类型别名 Coordinates，表示一个包含 x 和 y 属性的对象，并编写一个函数计算两点之间的距离。
  • 练习 2: 使用映射类型创建一个 Partial 类型，使得所有属性都变为可选的。
  • 附加资源: TypeScript 官方文档 是学习 TypeScript 的最佳资源之一。

通过不断练习和探索，你将能够更好地掌握 TypeScript 的类型安全模式，并编写出更加健壮和可维护的代码。