TypeScript 是 JavaScript 的一个超集，它添加了静态类型检查和基于类的面向对象编程特性。对于前端开发者来说，TypeScript 可以帮助我们写出更健壮、更易于维护的代码。本文将从零开始，带你轻松掌握 TypeScript 的前端类型系统。

一、TypeScript 简介

1.1 TypeScript 的优势

  • 类型安全：TypeScript 提供了静态类型检查，可以在编译阶段发现潜在的错误，减少运行时错误。
  • 增强的代码组织：通过类和模块，TypeScript 可以帮助我们更好地组织代码。
  • 更好的工具支持：TypeScript 获得了许多开发工具的支持，如 Visual Studio Code、WebStorm 等。

1.2 TypeScript 的安装

首先，我们需要安装 TypeScript 编译器。可以通过 npm 或 yarn 来安装：

npm install -g typescript
# 或者
yarn global add typescript

安装完成后，可以使用 tsc 命令来编译 TypeScript 代码。

二、基础类型

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

  • 数字：number
  • 字符串：string
  • 布尔值：boolean
  • 数组：Array<T>
  • 元组：[T1, T2, ...]
  • 枚举：enum
  • 任意类型：any
  • 未知类型：unknown
  • 空类型：null 和 undefined

2.1 数字和字符串

let age: number = 18;
let name: string = '张三';

2.2 数组

let numbers: number[] = [1, 2, 3];
let strings: string[] = ['a', 'b', 'c'];

2.3 元组

let point: [number, number] = [1, 2];

2.4 枚举

enum Color {
  Red,
  Green,
  Blue
}
let c: Color = Color.Green;

三、高级类型

TypeScript 提供了许多高级类型，包括：

  • 接口：interface
  • 类型别名：type
  • 联合类型：T | U
  • 交叉类型：T & U
  • 泛型：<T>

3.1 接口

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

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

let person: Person = {
  name: '张三',
  age: 18,
  sayHello() {
    return `Hello, my name is ${this.name}`;
  }
};

3.2 类型别名

类型别名可以给一个类型起一个新名字。

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

3.3 联合类型

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

let input: string | number = 123;
input = 'abc';

3.4 交叉类型

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

interface A {
  x: number;
}
interface B {
  y: string;
}
let point: A & B = { x: 1, y: '2' };

3.5 泛型

泛型允许我们在定义函数或接口时使用类型变量，从而实现类型参数化。

function identity<T>(arg: T): T {
  return arg;
}
let output = identity<string>('myString');

四、总结

通过本文的学习，相信你已经对 TypeScript 的前端类型系统有了初步的了解。在实际开发中，合理地使用 TypeScript 的类型系统，可以让我们写出更健壮、更易于维护的代码。希望这篇文章能帮助你轻松掌握 TypeScript 的前端类型系统。