TypeScript 是 JavaScript 的一个超集，它添加了静态类型检查和基于类的面向对象编程的特性。通过使用 TypeScript，我们可以构建更安全、更易维护的代码。本文将从零开始，逐步教你如何使用 TypeScript 构建强大的类型系统。

一、TypeScript 简介

1.1 TypeScript 的优势

  • 静态类型检查：在编译时进行类型检查，可以提前发现潜在的错误，提高代码质量。
  • 类型推断：TypeScript 可以自动推断变量类型，减少代码冗余。
  • 面向对象编程：支持类、接口、泛型等面向对象编程特性，提高代码可读性和可维护性。

1.2 TypeScript 的安装

安装 TypeScript 非常简单，只需在命令行中运行以下命令：

npm install -g typescript

二、TypeScript 基础类型

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

  • 数字（number）：表示整数和浮点数。
  • 字符串（string）：表示文本。
  • 布尔值（boolean）：表示真或假。
  • 数组（array）：表示一系列元素。
  • 元组（tuple）：表示固定长度的元素序列。
  • 枚举（enum）：为一组数值定义别名。
  • 任意类型（any）：表示任何类型。

三、高级类型

TypeScript 的高级类型包括：

  • 接口（interface）：为对象类型定义结构。
  • 类型别名（type alias）：为类型创建别名。
  • 联合类型（union type）：表示多个类型之一。
  • 交叉类型（intersection type）：表示多个类型的交集。
  • 泛型（generic）：为类型创建参数。

3.1 接口

接口用于定义对象的结构，如下所示：

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

3.2 类型别名

类型别名可以简化代码，如下所示：

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

3.3 联合类型

联合类型表示多个类型之一，如下所示：

let person: string | number;
person = "张三"; // 正确
person = 18; // 正确

3.4 交叉类型

交叉类型表示多个类型的交集，如下所示：

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

interface Address {
  city: string;
  country: string;
}

let personInfo: Person & Address;
personInfo = { name: "张三", age: 18, city: "北京", country: "中国" };

3.5 泛型

泛型允许我们在编写代码时，不指定具体的类型，而是在使用时指定，如下所示：

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

let output = identity<string>("张三"); // 使用字符串类型

四、类型守卫

类型守卫用于在运行时检查变量的类型，如下所示：

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

let value = "张三";
if (isString(value)) {
  console.log(value.toUpperCase()); // 正确
}
  • in 操作符：
function isNumber(value: any): value is number {
  return typeof value === "number" && !isNaN(value);
}

let value = 18;
if (isNumber(value)) {
  console.log(value.toFixed(2)); // 正确
}
  • instanceof 操作符：
class Animal {
  constructor(public name: string) {}
}

class Dog extends Animal {}

function isDog(animal: Animal): animal is Dog {
  return animal instanceof Dog;
}

let animal = new Animal("张三");
if (isDog(animal)) {
  console.log(animal.name); // 正确
}

五、模块化

TypeScript 支持模块化编程，可以将代码分割成多个模块，提高代码的可维护性和可复用性。

5.1 模块导入

import { Person } from "./person";

let person = new Person("张三", 18);

5.2 模块导出

export class Person {
  constructor(public name: string, public age: number) {}
}

六、总结

通过学习 TypeScript，我们可以构建更安全、更易维护的代码。本文从零开始，逐步介绍了 TypeScript 的基础类型、高级类型、类型守卫、模块化等内容，希望对你有所帮助。在实际开发中，请结合项目需求，灵活运用 TypeScript 的特性，提高代码质量。