在 JavaScript 的发展历程中，类型系统的缺失一直是一个痛点。TypeScript 正是为了解决这一痛点而诞生的。它是一种由 Microsoft 开发的开源编程语言，它是 JavaScript 的一个超集，添加了可选的静态类型和基于类的面向对象编程特性。掌握 TypeScript 的类型系统，能显著提升编码效率。以下是入门 TypeScript 类型系统的一些实用技巧。

一、TypeScript 基础类型

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

  • 数字 (number): 表示数值类型。
  • 字符串 (string): 表示文本类型。
  • 布尔 (boolean): 表示逻辑值。
  • 数组 (array): 可以包含任意类型的元素。
  • 元组 (tuple): 表示已知数量的元素和类型。
  • 枚举 (enum): 定义一组命名的数字常量。
  • 任意 (any): 表示可以赋值为任何类型。
  • 未知 (unknown): 与 any 类似，但类型系统不会对其进行推断。

示例代码：

let num: number = 42;
let str: string = "Hello, TypeScript!";
let bool: boolean = true;
let arr: number[] = [1, 2, 3];
let tuple: [string, number] = ["tuple", 42];
let enumVal: MyEnum = MyEnum.ONE;
let anyVal: any = 42;
let unknownVal: unknown = 42;

二、接口 (Interface)

接口用于定义对象的结构，它类似于其他语言的类。接口定义了一个对象必须拥有的属性和方法。

示例代码：

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

function introduce(person: Person): void {
  console.log(`My name is ${person.name}, and I am ${person.age} years old.`);
}

const me: Person = { name: "Alice", age: 30 };
introduce(me);

三、类型别名 (Type Alias)

类型别名用于创建新的类型名称，以便在代码中复用。

示例代码：

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

function introduce(user: User): void {
  console.log(`My name is ${user.name}, and I am ${user.age} years old.`);
}

const me: User = { name: "Alice", age: 30 };
introduce(me);

四、泛型 (Generics)

泛型用于创建可复用的、类型安全的组件。

示例代码：

function getArray<T>(items: T[]): T[] {
  return new Array<T>().concat(items);
}

const numberArray: number[] = getArray<number>([1, 2, 3]);
const stringArray: string[] = getArray<string>(["a", "b", "c"]);

五、联合类型 (Union Types)

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

示例代码：

let id: number | string = 1;
id = "123";

六、类型守卫 (Type Guards)

类型守卫用于确保类型检查的准确性。

示例代码：

function isString(input: any): input is string {
  return typeof input === "string";
}

const input: any = "Hello";
if (isString(input)) {
  console.log(input.toUpperCase());
}

七、映射类型 (Mapped Types)

映射类型用于从现有类型生成一个新的类型。

示例代码：

type MappedType<T> = {
  [P in keyof T]: T[P];
};

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

type MappedUser = MappedType<User>;

掌握 TypeScript 类型系统，能让你在编写代码时更加高效和自信。以上只是 TypeScript 类型系统的一小部分内容，更多的实用技巧等待你去探索。希望本文能帮助你轻松入门 TypeScript 类型系统。