正文

从零开始：轻松掌握 TypeScript 类型系统的实用技巧

/0 浏览量
0822

TypeScript 是 JavaScript 的一个超集，它通过引入静态类型系统来增强 JavaScript 的类型安全。掌握 TypeScript 类型系统对于编写清晰、健壮和易于维护的代码至关重要。下面，我们将从零开始，一步步探索 TypeScript 类型系统的实用技巧。

一、基础类型

TypeScript 提供了丰富的基础类型，包括数字（number）、字符串（string）、布尔值（boolean）、数组（array）、元组（tuple）、枚举（enum）、任意类型（any）、空类型（undefined）、null 和 never 类型。

1.1 数字类型

let age: number = 25;

1.2 字符串类型

let name: string = 'Alice';

1.3 布尔类型

let isTrue: boolean = true;

1.4 数组类型

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

1.5 元组类型

let point: [number, number] = [10, 20];

1.6 枚举类型

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

二、接口与类型别名

接口（interface）和类型别名（type）都是用来描述对象的类型。

2.1 接口

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

let person: Person = {
  name: 'Bob',
  age: 30
};

2.2 类型别名

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

let person: PersonType = {
  name: 'Bob',
  age: 30
};

三、联合类型与类型守卫

联合类型（union）允许一个变量表示多个类型。

3.1 联合类型

let age: number | string = 25;
age = 30; // 有效
age = 'thirty'; // 有效

3.2 类型守卫

类型守卫可以帮助我们更精确地判断变量的类型。

function isString(value: any): value is string {
  return typeof value === 'string';
}

let value: any = 'Hello';
if (isString(value)) {
  console.log(value.toUpperCase()); // 有效
}

四、泛型

泛型（generic）允许我们在编写代码时对类型进行抽象。

4.1 泛型函数

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

let output = identity<string>('myString'); // 类型为 string

4.2 泛型类

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = (x, y) => x + y;

五、高级类型

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

5.1 键类型

let x: { [x: string]: number };
x.name = 'Alice';
x.age = 25;

5.2 映射类型

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

let x: Readonly<number[]> = [1, 2, 3];
x[0] = 12; // 错误

5.3 条件类型

type Condition<T> = T extends string ? string : number;

let x: Condition<string> = 'Hello'; // 类型为 string
let y: Condition<number> = 10; // 类型为 number

六、总结

通过以上内容，我们了解了 TypeScript 类型系统的基本概念和实用技巧。掌握这些技巧可以帮助我们编写更加清晰、健壮和易于维护的代码。在实际开发中，我们可以根据具体需求灵活运用这些技巧，让 TypeScript 成为我们的得力助手。

-- 展开阅读全文 --