TypeScript 是一种由微软开发的编程语言，它是 JavaScript 的一个超集，为 JavaScript 添加了可选的静态类型和基于类的面向对象编程。掌握 TypeScript 的类型系统对于提高代码质量、可维护性和开发效率至关重要。本文将带你轻松掌握 TypeScript 类型系统的实用技巧与实战案例。

一、基础类型

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

  • 布尔值（boolean）
  • 数字（number）
  • 字符串（string）
  • 数组（array）
  • 元组（tuple）
  • 枚举（enum）
  • 任意类型（any）
  • 空类型（undefined）
  • null
  • void

1.1 布尔值

布尔值是最简单的类型，它只有两个值：true 和 false。

let isDone: boolean = false;

1.2 数字

数字类型在 TypeScript 中与 JavaScript 相同，包括整数和浮点数。

let age: number = 26;

1.3 字符串

字符串类型用于表示文本数据。

let name: string = '张三';

1.4 数组

数组是一种有序集合，可以包含任意数量的元素。

let numbers: number[] = [1, 2, 3];

1.5 元组

元组是一种特殊的数组，它的元素数量和类型是固定的。

let person: [string, number] = ['张三', 26];

1.6 枚举

枚举用于定义一组命名的常量。

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

二、高级类型

TypeScript 的高级类型包括接口（interface）、类型别名（type alias）、联合类型（union type）、交叉类型（intersection type）和泛型（generic）等。

2.1 接口

接口用于定义一组属性，用于描述对象的形状。

interface Person {
  name: string;
  age: number;
}
let tom: Person = {
  name: 'Tom',
  age: 25
};

2.2 类型别名

类型别名用于给一个类型起一个新名字。

type PersonType = {
  name: string;
  age: number;
};
let tom: PersonType = {
  name: 'Tom',
  age: 25
};

2.3 联合类型

联合类型表示可能属于多个类型之一的变量。

let age: string | number = 26;

2.4 交叉类型

交叉类型表示同时具有多个类型的属性。

interface Person {
  name: string;
}
interface Animal {
  age: number;
}
let tom: Person & Animal = {
  name: 'Tom',
  age: 25
};

2.5 泛型

泛型用于创建可复用的组件，其中类型在组件使用时指定。

function identity<T>(arg: T): T {
  return arg;
}
let output = identity<string>('你的类型');

三、实战案例

下面我们将通过几个实战案例来展示 TypeScript 类型系统的应用。

3.1 使用接口和类型别名定义对象结构

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

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

let tom: Person = {
  name: 'Tom',
  age: 25
};

let tomType: PersonType = {
  name: 'Tom',
  age: 25
};

3.2 使用泛型定义可复用的组件

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

let output = identity<string>('你的类型');

3.3 使用联合类型处理多种情况

function greet(who: string | number) {
  if (typeof who === 'string') {
    return `Hello, ${who}!`;
  }
  return `Hello, ${who}!`;
}

console.log(greet('张三')); // Hello, 张三!
console.log(greet(26)); // Hello, 26!

四、总结

掌握 TypeScript 类型系统对于提高代码质量和开发效率至关重要。通过本文的学习，相信你已经对 TypeScript 类型系统有了更深入的了解。在实际开发中，灵活运用这些类型系统，可以让你编写出更加健壮、可维护的代码。