返回

从 Typescript 新手到高手，触及专业领域（二）

前端

在上一节，我们初步了解了 Typescript 中的基本类型、接口等基础知识。这节课，我们将探索 Typescript 中函数的奥妙，以及类型如何进行运算，包括交叉类型和联合类型。最后，我们会探究最原子类型的字面量类型，以及如何利用联合类型实现类型守卫。

一、函数与类型

Typescript 中，函数与类型密不可分。函数既可以接受参数，也可以返回类型。例如：

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

在这里，sum 函数接受两个数字作为参数，并返回一个数字作为结果。

二、类型运算

在 Typescript 中，类型之间可以进行运算，包括交叉类型和联合类型。

  1. 交叉类型

交叉类型用于组合多个类型。例如：

type PersonInfo = {
  name: string;
};

type ContactInfo = {
  email: string;
  phone: string;
};

type FullInfo = PersonInfo & ContactInfo;

FullInfo 类型就将 PersonInfo 和 ContactInfo 两个类型组合在一起，形成了一个包含 name、email 和 phone 属性的新类型。

  1. 联合类型

联合类型用于表示一个值可以是多种类型之一。例如：

type StringOrNumber = string | number;

StringOrNumber 类型表示一个值可以是字符串或数字。

三、字面量类型

字面量类型表示一个特定值。例如：

type Age = 18 | 20 | 22;

Age 类型表示一个值只能是 18、20 或 22 之一。

四、联合类型与类型守卫

联合类型与类型守卫配合使用，可以实现类型之间的动态检查。例如：

function isAdult(age: StringOrNumber): boolean {
  if (typeof age === "string") {
    return false;
  } else {
    return age >= 18;
  }
}

isAdult 函数接受一个 StringOrNumber 类型的参数，并返回一个布尔值。如果参数是字符串，则返回 false。否则，如果参数是数字，则检查其是否大于或等于 18，并返回结果。

本节内容为Typescript进阶学习的铺垫，有助于我们更深入地理解Typescript的类型系统。在后续章节，我们将继续探索Typescript的奥秘，包括类、模块、泛型等高级特性。敬请期待！