全面解析TypeScript全类型，一文掌握所有知识点

2023-03-01 03:00:25

深入浅出：掌握TypeScript类型系统的精髓

类型基础

TypeScript，作为一门备受推崇的前端开发语言，拥有强大的类型系统。类型系统，正如其名，是一种机制，用于定义和检查代码中变量的类型。在TypeScript中，类型可以分为两类：基本类型和引用类型。基本类型包括：布尔类型（true/false）、数字类型（整数、浮点数）、字符串类型（文本）和对象类型（表示复杂数据结构）。引用类型则引用对象，如数组、函数和自定义类。

类型推断和注解

TypeScript支持类型推断，这是一种神奇的功能，可以根据变量的值自动推断其类型。例如：

let name = "Alice"; // TypeScript推断name为string类型

此外，TypeScript也支持类型注解，即显式指定变量的类型。类型注解可以提高代码的可读性和可维护性：

let age: number = 25; // 显式指定age为number类型

类型别名和接口

类型别名允许我们为现有类型定义一个新的名称。这在需要多次使用复杂类型时非常有用：

type Point = { x: number; y: number; }; // 定义一个名为Point的类型别名

接口与类型别名类似，但更强大。它们可以定义一组属性和方法，要求任何实现该接口的类型都必须包含这些属性和方法：

interface Drawable {
  draw(): void; // 定义一个名为Drawable的接口，它要求实现该接口的类型必须包含一个draw()方法
}

类型联合和交叉

类型联合允许我们定义一个类型，该类型可以是多个其他类型的其中之一。例如，我们可以定义一个名为Shape的类型联合，表示一个可以是圆形、矩形或三角形的图形：

type Shape = Circle | Rectangle | Triangle; // 定义一个类型联合，表示一个可以是Circle、Rectangle或Triangle类型的图形

类型交叉则允许我们定义一个类型，该类型是多个其他类型的组合。例如，我们可以定义一个名为ColoredShape的类型交叉，表示一个具有颜色和形状的图形：

type ColoredShape = Shape & { color: string; }; // 定义一个类型交叉，表示一个具有颜色和形状的图形

类型守护和断言

类型守护是一种检查变量是否属于某个类型的机制。TypeScript支持两种类型的守护：

typeof 运算符： 检查变量的实际类型：

if (typeof variable === "string") {
  // do something
}

in 运算符： 检查变量是否属于某个类型联合：

if ("string" in variable) {
  // do something
}

类型断言允许我们强制将一个变量转换为某个类型：

let variable = "1";
let numberVariable = variable as number; // 强制将variable转换为number类型

类型兼容性和安全性

类型兼容性是指两个类型是否可以互换使用。TypeScript会检查类型兼容性，以确保代码中使用的类型都是兼容的。例如，number类型与any类型兼容，因为any类型可以表示任何类型：

let numberVariable: number = 1;
let anyVariable: any = numberVariable; // number类型与any类型兼容

类型安全性是指在编译时检查类型是否兼容。TypeScript的类型系统是静态的，这意味着它在编译时检查类型，而不是在运行时。这有助于防止类型错误并提高代码的可信度。

类型转换

有时，我们需要将一个变量从一种类型转换为另一种类型。TypeScript支持两种类型的转换：

内置转换： TypeScript提供了一组内置的转换函数，如parseInt()和parseFloat()：

let numberVariable = parseInt("1"); // 将字符串转换为数字

自定义转换： 我们可以定义自己的自定义转换函数：

function convertToString(variable: any): string {
  return String(variable); // 将任何类型的变量转换为字符串
}

类型泛型

类型泛型允许我们定义一种类型，该类型可以包含其他类型。例如，我们可以定义一个名为Array的类型泛型，表示一个由T类型元素组成的数组：

class Array<T> {
  private items: T[]; // 数组中的元素类型由T指定

  // ...其他方法
}

类型参数和类型推论

类型泛型中使用的类型称为类型参数。TypeScript可以根据上下文推断类型参数的类型。例如：

const numbers = new Array(1, 2, 3); // TypeScript推断出Array的类型参数T为number

类型窄化

类型窄化是指在运行时缩小变量的类型。TypeScript支持两种类型的窄化：

条件语句：

if (variable is string) {
  // do something
}

类型保护：

class Person {
  name: string;

  isTeacher(): boolean {
    return this instanceof Teacher; // instanceof运算符用于类型保护
  }
}

class Teacher extends Person {
  subject: string;
}