TypeScript 是 JavaScript 的一个超集，它添加了可选的静态类型和基于类的面向对象编程。类型系统是 TypeScript 的核心特性之一，它有助于提高代码的可读性、减少运行时错误，并增强开发者对代码结构的理解。以下是一些轻松掌握 TypeScript 类型系统的核心用法与技巧。

1. 基本类型

TypeScript 提供了多种基本数据类型，包括：

  • number：数字类型。
  • string：字符串类型。
  • boolean：布尔类型。
  • undefined：未定义类型，表示变量未初始化。
  • null：空值类型，表示变量不包含任何值。
let age: number = 25;
let name: string = '张三';
let isMarried: boolean = true;
let age1: undefined;
let age2: null = null;

2. 任意类型

使用 any 类型可以赋予变量任何类型，相当于在 TypeScript 中禁用了类型检查。

let age: any = 25;
age = '三十'; // 没有类型错误

注意：尽量避免使用 any 类型，因为它会绕过 TypeScript 的类型检查。

3. 联合类型

联合类型允许变量同时属于多个类型中的一种。

let age: number | string;
age = 25; // ok
age = '三十'; // ok

4. 元组类型

元组类型允许变量由已知数量的已知类型构成。

let ageAndName: [number, string];
ageAndName = [25, '张三']; // ok

注意：元组元素的类型在创建时已确定，无法修改。

5. 接口（Interfaces）

接口用于定义对象的形状，包括属性名和类型。

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

let person: Person = {
  name: '张三',
  age: 25
};

6. 类（Classes）

类用于实现接口，定义对象的属性和方法。

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayHello(): string {
    return `你好，我叫 ${this.name}`;
  }
}

let person = new Person('张三', 25);
console.log(person.sayHello()); // 输出：你好，我叫 张三

7. 类型别名

类型别名允许为类型创建一个新的名字。

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

let person: PersonType = {
  name: '张三',
  age: 25
};

8. 高级类型

TypeScript 还提供了高级类型，如键选类型、映射类型、条件类型等。

键选类型

键选类型允许访问对象类型的某个键的类型。

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

type PersonName = Person['name']; // 类型为 string

映射类型

映射类型允许基于现有类型创建新的类型。

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

type PersonProperties = {
  [K in keyof Person]: string;
};

let personProperties: PersonProperties = {
  name: '张三',
  age: '25'
};

条件类型

条件类型允许在类型中根据条件进行选择。

type IsString<T> = T extends string ? true : false;

let isString: IsString<'张三'> = true; // true

总结

掌握 TypeScript 类型系统的核心用法与技巧对于提高代码质量和开发效率具有重要意义。通过本文的介绍，相信你已经对 TypeScript 类型系统有了初步的了解。在实际开发中，不断积累和总结，你将能更加熟练地运用 TypeScript 类型系统，打造更优秀的应用程序。