TypeScript，作为 JavaScript 的超集，引入了一个强大的类型系统，使得开发者能够以更安全、更高效的方式编写代码。本文将带领你从 TypeScript 的基础类型开始，逐步深入到高级类型，让你轻松掌握强类型编程的艺术。

一、TypeScript 简介

TypeScript 是由微软开发的，旨在为 JavaScript 提供类型系统的编程语言。它编译成普通的 JavaScript，因此可以在任何支持 JavaScript 的环境中运行。TypeScript 的类型系统可以帮助开发者：

  • 防止运行时错误
  • 提高代码可维护性
  • 增强开发效率

二、基础类型

TypeScript 支持多种基础类型，包括：

  • 数字：number，用于表示整数和浮点数。
  • 字符串：string，用于表示文本。
  • 布尔值：boolean，用于表示真或假。
  • 数组：通过指定元素类型来创建数组。
  • 元组：固定长度的数组，每个元素都有具体的类型。
  • 枚举：一组命名的数字值，可以用于代替数字。

示例：

let age: number = 25;
let name: string = "Alice";
let isStudent: boolean = true;
let hobbies: string[] = ["reading", "swimming"];
let coordinates: [number, number] = [10, 20];
enum Color { Red, Green, Blue };
let favoriteColor: Color = Color.Red;

三、高级类型

TypeScript 的高级类型包括接口、类型别名、联合类型、交叉类型、泛型等。

接口

接口用于定义对象的形状，可以包含多个属性和方法的定义。

interface Person {
  name: string;
  age: number;
  greet(greeting: string): string;
}

let person: Person = {
  name: "Bob",
  age: 30,
  greet(greeting: string): string {
    return `${greeting}, ${this.name}!`;
  }
};

类型别名

类型别名是给类型起一个新名字，可以用于简化复杂类型。

type StringArray = string[];
let words: StringArray = ["hello", "world"];

联合类型

联合类型表示一个变量可以是多个类型之一。

let input: string | number = 42;
input = "Hello"; // 有效
input = 100; // 有效

交叉类型

交叉类型表示一个变量可以同时拥有多个类型的属性。

interface Cat {
  breed: string;
}

interface Dog {
  color: string;
}

let pet: Cat & Dog = {
  breed: "Persian",
  color: "white"
};

泛型

泛型允许你在定义函数或接口时使用类型变量，从而使得函数或接口能够处理任意类型的数据。

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

let output = identity<string>("myString");

四、进阶类型

TypeScript 还提供了高级类型，如映射类型、条件类型、索引访问类型等。

映射类型

映射类型允许你创建一个新类型，它是另一个类型的键值对。

type StringToNumber = {
  [Property in string as `to${Capitalize<Property>}`]: number;
};

let myStringToNumber: StringToNumber = {
  toLength: 10,
  toWidth: 5
};

条件类型

条件类型允许你在条件表达式的基础上返回不同类型的值。

type TriangleType = {
  type: 'equilateral' | 'isosceles' | 'scalene';
};

type TriangleLengths<T extends TriangleType> = {
  type: T['type'];
  sideA: number;
  sideB: number;
  sideC: number;
  perimeter: number;
};

let triangle: TriangleLengths<{'type': 'equilateral'}>;

索引访问类型

索引访问类型允许你通过索引访问一个类型的属性。

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

let myArray: StringArray = ['a', 'b', 'c'];
let first: string = myArray[0];

五、总结

TypeScript 的类型系统功能强大，可以帮助开发者编写更安全、更高效的代码。通过本文的学习，相信你已经对 TypeScript 的类型系统有了深入的了解。现在，你可以开始尝试将 TypeScript 应用于你的项目中，享受强类型编程带来的便利吧！