TypeScript 是 JavaScript 的一个超集，它添加了静态类型检查和类等特性，使得 JavaScript 开发更加可靠和高效。在这篇文章中，我们将从 TypeScript 的基础类型开始，逐步深入到高级特性，帮助你更好地掌握 TypeScript 类型系统，从而提升你的 JavaScript 开发效率。

基础类型

TypeScript 的基础类型包括：

  • 布尔值（boolean）：表示真或假的值。
  • 数字（number）：表示数值。
  • 字符串（string）：表示文本。
  • 数组（array）：表示一系列值。
  • 元组（tuple）：表示已知数量的元素组成的数组。
  • 枚举（enum）：为一组数值赋予友好的名称。
  • 任意类型（any）：表示可以赋值为任何类型的值。
  • 未知类型（unknown）：表示任何类型的值，但需要进一步的检查。
  • 空类型（null）：表示空值。
  • undefined：表示未定义的值。

示例：

let isDone: boolean = false;
let count: number = 10;
let name: string = "张三";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["张三", 30];
let color: string | number = 2; // 可以为字符串或数字
let myName: unknown = "张三";
let myAge: null = null;
let myUndefined: undefined = undefined;

接口和类型别名

接口（interface）和类型别名（type alias）都是用来定义类型的方式。

  • 接口：用于描述对象的形状，可以包含多个属性。
  • 类型别名：可以给一个类型起一个新名字，方便在其他地方复用。

示例：

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

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

let person: Person = {
  name: "张三",
  age: 30
};

高级类型

TypeScript 的高级类型包括：

  • 联合类型（union type）：表示可能为多个类型之一的值。
  • 交叉类型（intersection type）：表示同时具有多个类型特征的值。
  • 类型守卫（type guard）：用于在运行时检查一个变量属于某个类型。
  • 泛型（generics）：用于创建可复用的组件，同时保持类型安全。

示例：

// 联合类型
function greet(name: string | number) {
  console.log(`Hello, ${name}`);
}

// 交叉类型
interface Animal {
  name: string;
}

interface Mammal {
  age: number;
}

let myAnimal: Animal & Mammal = { name: "张三", age: 30 };

// 类型守卫
function isString(value: any): value is string {
  return typeof value === "string";
}

let myValue: any = "张三";
if (isString(myValue)) {
  console.log(myValue.toUpperCase());
}

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

let output = identity<string>("张三");

总结

掌握 TypeScript 类型系统对于提升 JavaScript 开发效率至关重要。通过本文的介绍，相信你已经对 TypeScript 类型系统有了更深入的了解。在实际开发中，不断实践和总结，你将能够更好地利用 TypeScript 类型系统，编写出更加可靠和高效的代码。