TypeScript 是 JavaScript 的一个超集，它通过引入类型系统来增强 JavaScript 的类型安全性。掌握 TypeScript 的类型系统，可以让你的 JavaScript 开发更加稳健，同时也能显著提升开发效率。下面，我们就来一招一式地学习 TypeScript 的类型系统，让你轻松提升 JavaScript 开发效率。

一、基础类型

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

  • 数字（number）：表示数值类型。
  • 字符串（string）：表示文本类型。
  • 布尔值（boolean）：表示真或假。
  • 数组（array）：表示一组有序的数据。
  • 元组（tuple）：表示一个已知元素数量和类型的数组。
  • 枚举（enum）：定义一组命名的数字常量。
  • 任意类型（any）：表示可以赋值为任何类型的值。
  • 未知类型（unknown）：表示任何类型，但类型检查器无法提供任何保证。
  • void：表示没有任何返回值。
  • null 和 undefined：表示空值。

示例：

let num: number = 10;
let str: string = "Hello, TypeScript!";
let bool: boolean = true;
let arr: number[] = [1, 2, 3];
let tuple: [string, number] = ["name", 18];
let enumValue: Role = Role.Admin;
let anyValue: any = "I can be anything!";
let unknownValue: unknown = 10;
let voidFunc(): void {};
let nullValue: null = null;
let undefinedValue: undefined = undefined;

二、接口（Interface）

接口用于定义对象的形状，它描述了一个对象必须有哪些属性和方法。

示例：

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

function greet(person: Person): void {
  console.log(person.name + " says hello!");
}

const person: Person = {
  name: "Alice",
  age: 25,
  sayHello(): string {
    return "Hello!";
  }
};

greet(person);

三、类型别名（Type Alias）

类型别名可以给一个类型起一个新名字，方便在其他地方使用。

示例：

type Role = "Admin" | "User" | "Guest";

function checkRole(role: Role): void {
  console.log(role);
}

checkRole("Admin"); // 输出：Admin

四、联合类型（Union Type）

联合类型表示一个变量可以是多种类型中的一种。

示例：

function printId(id: string | number): void {
  console.log(id);
}

printId(123); // 输出：123
printId("456"); // 输出：456

五、交叉类型（Intersection Type）

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

示例：

interface Animal {
  name: string;
}

interface Mammal {
  age: number;
}

type Dog = Animal & Mammal;

const dog: Dog = {
  name: "Buddy",
  age: 3
};

六、泛型（Generic）

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

示例：

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

const output = identity<string>("myString"); // 类型为 string

七、高级类型

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

示例：

type KeyOf<T> = keyof T;
type Person = {
  name: string;
  age: number;
};

const nameKey: KeyOf<Person> = "name"; // 类型为 "name" | "age"

总结

掌握 TypeScript 类型系统，可以让你的 JavaScript 开发更加稳健，同时也能显著提升开发效率。通过本文的学习，相信你已经对 TypeScript 类型系统有了初步的了解。在实际开发中，不断实践和总结，你将能够更好地运用 TypeScript 类型系统，让你的代码更加健壮、易维护。