深入浅出TypeScript | 青训营笔记

TypeScript 是一种由 Microsoft 开发和维护的开源编程语言，它是 JavaScript 的超集，为 JavaScript 提供了静态类型、类、模块等特性。TypeScript 可以让 JavaScript 代码更加易于维护、调试和阅读。本篇笔记将介绍 TypeScript 的基础知识和进阶特性，并结合实例进行分析。

基础知识

类型注解

TypeScript 通过类型注解提供了静态类型检查。类型注解是指在变量或函数返回值等地方显式地声明变量类型，例如：

let num: number = 123;
function add(x: number, y: number): number {
  return x + y;
}

在上面的例子中，我们使用了 number 类型注解来声明变量 num 和函数 add 的参数和返回值的类型。

接口

接口是一种用于描述对象结构的类型，它可以定义对象的属性、方法、索引类型等。例如：

interface Person {
  name: string;
  age: number;
  sayHi: () => void;
}

上面的代码定义了一个 Person 接口，它具有 name 和 age 两个属性，以及 sayHi 方法。我们可以使用该接口来定义符合该接口定义的对象：

let person: Person = {
  name: "Alice",
  age: 30,
  sayHi: () => console.log("Hi!")
};

类

TypeScript 支持面向对象编程，通过 class 关键字来定义类：

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHi() {
    console.log(`Hi, my name is ${this.name}`);
  }
}

上面的代码定义了一个 Animal 类，它具有一个 name 属性和一个 sayHi 方法。我们使用 new 关键字来创建该类的实例：

let cat = new Animal("Tom");
cat.sayHi(); // Hi, my name is Tom

泛型

泛型是一种用于在编译时期处理类型的方法，它可以让我们在定义函数、类或接口时不指定类型，而是在使用时再指定类型。例如：

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

上面的代码定义了一个 identity 函数，它接受一个类型为 T 的参数，并返回该参数。我们可以在使用时指定 T 的具体类型：

let output = identity<string>("hello");
console.log(output); // hello

枚举

枚举是一种用于定义一组有名字的常量的数据类型。例如：

enum Color {
  Red,
  Green,
  Blue
}

上面的代码定义了一个 Color 枚举，它包含三个常量 Red、Green 和 Blue。我们可以使用这些常量来定义变量：

let c: Color = Color.Green;
console.log(c); // 1

进阶特性

类型别名

类型别名是一种用于给类型起别名的方法，它可以让我们更方便地使用复杂的类型。例如：

type Point = {
  x: number;
  y: number;
};

上面的代码定义了一个 Point 类型别名，它代表一个具有 x 和 y 两个属性的对象。我们可以在其他地方使用该别名来代替该类型：

let p: Point = { x: 1, y: 2 };