TypeScript 是 JavaScript 的一个超集，它通过引入静态类型系统来增强 JavaScript 的类型安全性。掌握 TypeScript 的类型系统对于提升代码质量和开发效率至关重要。以下是一些关键概念和实践，帮助你轻松掌握 TypeScript 类型系统。

一、类型系统的基本概念

TypeScript 的类型系统允许你在代码中指定变量的类型。这有助于在编译阶段捕捉错误，减少运行时错误，并提高代码的可维护性。

1. 基本类型

TypeScript 支持以下基本类型：

  • number：表示数字，例如 let age: number = 25;
  • string：表示字符串，例如 let name: string = 'Alice';
  • boolean：表示布尔值，例如 let isStudent: boolean = true;
  • any：表示任意类型，可以用于在编译时忽略类型检查，例如 let data: any = [1, 'Alice', true];

2. 复合类型

TypeScript 还支持复合类型，例如：

  • tuple：表示一个固定长度的数组，每个元素有特定的类型，例如 let point: [number, number] = [1, 2];
  • array：表示一个数组，可以使用数组类型或泛型，例如 let numbers: number[] = [1, 2, 3]; 或 let numbers: Array<number> = [1, 2, 3];
  • enum：表示枚举类型，例如 enum Color { Red, Green, Blue };

二、高级类型

TypeScript 提供了一些高级类型，使类型系统更加灵活和强大。

1. 函数类型

函数类型允许你指定函数的参数和返回值类型，例如：

function greet(name: string): string {
  return 'Hello, ' + name;
}

2. 接口

接口用于定义一组属性，这些属性必须包含在实现接口的对象中，例如：

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

function introduce(person: Person): void {
  console.log(`${person.name}, ${person.age} years old.`);
}

3. 类

类用于定义具有属性和方法的对象，例如：

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  makeSound(): void {
    console.log(`${this.name} makes a sound.`);
  }
}

4. 泛型

泛型允许你创建可重用的组件，这些组件可以处理任意类型的数据，例如：

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

三、类型守卫

类型守卫用于在运行时检查变量的类型，以确保代码的正确性。

1. 类型守卫的基本用法

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

function processValue(value: any) {
  if (isString(value)) {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}

2. 可选链操作符

可选链操作符 ?. 允许你安全地访问嵌套对象属性，即使某些属性可能不存在，例如：

const user = {
  name: 'Alice',
  address: {
    street: '123 Main St',
    city: 'Wonderland',
  },
};

console.log(user.address?.city); // 输出: Wonderland

四、总结

掌握 TypeScript 类型系统对于提升代码质量和开发效率至关重要。通过理解基本类型、复合类型、高级类型和类型守卫等概念，你可以编写更加健壮和可维护的代码。开始使用 TypeScript 吧，让你的 JavaScript 开发更加高效！