正文

掌握 TypeScript 类型系统：从基础到高级应用技巧

/0 浏览量
1108

TypeScript 是 JavaScript 的一个超集，它通过引入静态类型系统来增强 JavaScript 的功能和可维护性。类型系统是 TypeScript 的核心特性之一，它可以帮助开发者提前发现潜在的错误，提高代码的可读性和可维护性。本文将带您从 TypeScript 类型系统的基础知识开始，逐步深入到高级应用技巧。

一、TypeScript 类型系统基础

1.1 基本类型

TypeScript 提供了丰富的基本类型，包括：

  • 布尔值（boolean）
  • 数字（number）
  • 字符串（string）
  • null 和 undefined
  • 字面量类型（如 string）
let isDone: boolean = false;
let count: number = 10;
let msg: string = "Hello, TypeScript!";
let age: 18 | 20 | 22; // 联合类型

1.2 对象类型

对象类型在 TypeScript 中非常重要，它可以帮助我们描述复杂的数据结构。

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

let person: Person = {
  name: "Alice",
  age: 25
};

1.3 数组类型

TypeScript 支持多种数组类型，包括普通数组、元组（tuple）和泛型数组。

let arr1: number[] = [1, 2, 3];
let arr2: [string, number] = ["Alice", 25];
let arr3: Array<number> = [1, 2, 3];

二、高级类型应用技巧

2.1 泛型

泛型允许我们在编写代码时延迟指定类型，直到使用该类型的地方。

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

let output = identity<string>("myString"); // 类型为 string

2.2 高级接口

TypeScript 支持高级接口，如索引签名、可索引类型和映射类型。

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray = ["Alice", "Bob", "Charlie"];

interface MapType<T, U> {
  [key: string]: T;
}

let myMap: MapType<number, string> = {
  name: 1,
  age: 2
};

2.3 类型别名和交叉类型

类型别名和交叉类型可以帮助我们简化类型声明。

type StringOrNumber = string | number;

let myVar: StringOrNumber = "Hello";
myVar = 10;

type User = {
  name: string;
  age: number;
};

type Employee = User & { id: number };

let employee: Employee = {
  name: "Alice",
  age: 25,
  id: 1
};

2.4 联合类型和类型守卫

联合类型允许我们声明一个变量可以有多种类型。

let input: string | number = 10;
if (typeof input === "string") {
  console.log(input.toUpperCase());
} else {
  console.log(input.toFixed(2));
}

2.5 高级类型技巧

TypeScript 还支持其他高级类型技巧，如条件类型、映射类型和键断言等。

type ConditionalType<T, U = T> = T extends U ? U : T;

type Result = ConditionalType<number, string>;

type MappedType<T> = {
  [P in keyof T]: T[P];
};

type MappedResult = MappedType<{ name: string; age: number }>;

type KeyOfUnion<T> = T[keyof T];

type KeyOfUnionResult = KeyOfUnion<string | number | boolean>;

三、总结

TypeScript 类型系统是一个强大的工具，可以帮助我们编写更加健壮和可维护的代码。通过掌握 TypeScript 类型系统的基础知识，以及高级应用技巧，我们可以更好地利用 TypeScript 的特性，提高开发效率。希望本文能帮助您更好地理解 TypeScript 类型系统，并在实际项目中应用它。

-- 展开阅读全文 --