TypeScript 是 JavaScript 的一个超集,它通过引入静态类型系统来增强 JavaScript 的类型安全。掌握 TypeScript 的类型系统对于编写可维护、可扩展的代码至关重要。本文将带你从基础到高级,一步步学习 TypeScript 的类型定义与类型保护技巧。

一、TypeScript 类型系统基础

1.1 基本类型

TypeScript 支持多种基本类型,如 numberstringbooleannullundefined。例如:

let age: number = 25;
let name: string = '张三';
let isStudent: boolean = false;

1.2 对象类型

对象类型是 TypeScript 中最常用的类型之一。它可以用来描述一个对象的结构。例如:

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

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

1.3 数组类型

数组类型可以用来描述一个数组中元素的数据类型。例如:

let numbers: number[] = [1, 2, 3];
let strings: string[] = ['a', 'b', 'c'];

1.4 函数类型

函数类型可以用来描述一个函数的参数和返回值类型。例如:

function add(a: number, b: number): number {
  return a + b;
}

二、高级类型

2.1 泛型

泛型允许你在定义类型时使用类型变量,从而实现类型参数化。例如:

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

2.2 类型别名

类型别名可以用来给一个类型起一个新名字。例如:

type StringArray = string[];

2.3 联合类型

联合类型允许你声明一个变量可以具有多种类型之一。例如:

let result: string | number = 'hello';
result = 123;

2.4 接口与类型别名

接口和类型别名都可以用来描述对象的结构,但它们有一些区别。接口可以继承,而类型别名可以重用。

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

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

三、类型保护

类型保护是一种技术,用于检查一个变量是否属于某个特定的类型。TypeScript 提供了多种类型保护方法,如 typeofin 和自定义类型保护函数。

3.1 typeof 类型保护

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

let value: any = 'hello';
if (isString(value)) {
  console.log(value.toUpperCase()); // 输出: HELLO
}

3.2 in 类型保护

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

interface Animal {
  name: string;
  type: string;
}

function isPerson(value: Person | Animal): value is Person {
  return 'age' in value;
}

let value: Person | Animal = { name: '张三', age: 25 };
if (isPerson(value)) {
  console.log(value.age); // 输出: 25
}

3.3 自定义类型保护函数

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

function isNumber(value: any): value is number {
  return typeof value === 'number';
}

let value: any = 'hello';
if (isString(value)) {
  console.log(value.toUpperCase()); // 输出: HELLO
} else if (isNumber(value)) {
  console.log(value.toFixed(2)); // 输出: 0.00
}

四、总结

TypeScript 的类型系统功能强大,可以帮助你编写更安全、更可靠的代码。通过本文的学习,相信你已经对 TypeScript 的类型定义与类型保护技巧有了更深入的了解。希望你在实际项目中能够灵活运用这些技巧,提高代码质量。