脱离JavaScript的束缚：打开TypeScript的神奇大门

📈「作者简介」：不知名十八线技术博主【ai_todo】
📚「推荐主页」：前端小姐姐【阿珊和她的猫】
🎁「推荐专栏」：《从0到0.01入门React》
🕐「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

• Vue.js 和 Egg.js 开发企业级健康管理项目
• 带你从入门到实战全面掌握 uni-app

类型别名与字符串字面量类型

在 TypeScript 中，类型别名（Type Alias）和字符串字面量类型（String Literal Types）都是用来创建自定义类型的方式。

类型别名允许你给一个类型起一个新的名字，而不必创建新的类型。你可以使用 type 关键字来定义类型别名，例如：

type MyNumber = number;

在这个例子中，MyNumber 是一个类型别名，它表示 number 类型。

类型别名的真正威力在于它可以与其他类型结合使用，创建复杂的类型。例如：
类型别名的真正威力在于它可以与其他类型结合使用，创建复杂的类型。例如：

type Point = {
  x: number;
  y: number;
};

type Circle = {
  center: Point;
  radius: number;
};

在这个例子中，我们定义了两个类型别名 Point 和 Circle。Point 表示一个有 x 和 y 坐标的点，Circle 表示一个圆，它有一个中心点和一个半径。

字符串字面量类型用于限制变量只能取特定字符串的值。例如：
字符串字面量类型用于限制变量只能取特定字符串的值。例如：

type Direction = "North" | "South" | "East" | "West";

let myDirection: Direction;
myDirection = "North"; // 合法
myDirection = "Up"; // 非法，不是有效的 Direction 值

在这个例子中，Direction 是一个字符串字面量类型，它只能取 "North"、"South"、"East" 或 "West" 这四个值中的一个。

字符串字面量类型可以用于创建更具体的类型约束，同时提供更好的类型安全性。你可以根据具体的需求定义自己的字符串字面量类型。

总结起来，类型别名允许你给一个类型起一个新的名字，而字符串字面量类型用于限制变量只能取特定字符串的值。两者都可以帮助你在 TypeScript 中创建和使用自定义类型。

枚举

在 TypeScript 中，枚举（Enum）是一种用于定义一组命名常量的结构化类型。

使用枚举可以为一组相关的常量赋予更有意义的名称，并且可以方便地在代码中引用这些常量。

以下是一个简单的枚举的示例：

enum Direction {
  North,
  South,
  East,
  West
}

在这个示例中，我们定义了一个名为 Direction 的枚举，它包含了四个成员：North、South、East 和 West。

默认情况下，枚举成员的值是从 0 开始自动递增的。所以 Direction.North 的值为 0，Direction.South 的值为 1，以此类推。

我们可以使用枚举成员作为常量来引用它们：

let myDirection: Direction = Direction.North;
console.log(myDirection); // 0

枚举成员也可以手动指定值：

enum Direction {
  North = 10,
  South = 20,
  East = 30,
  West = 40
}

在这个示例中，我们手动指定了每个枚举成员的值。

枚举还支持反向映射，可以通过枚举值获取对应的枚举成员的名称：

enum Direction {
  North,
  South,
  East,
  West
}

let directionName: string = Direction[1];
console.log(directionName); // "South"

在这个示例中，我们通过 Direction[1] 获取了对应值为 1 的枚举成员的名称。

除了默认的递增数字值和手动指定的值，枚举还支持字符串枚举和异构枚举等更高级的扩展。

总结起来，枚举是一种在 TypeScript 中定义命名常量的方式，能够更好地描述一组相关的值，并且提供方便的引用和可读性。

可辨识联合与类型守卫

在 TypeScript 中，可辨识联合（Discriminated Union）和类型守卫（Type Guard）是一种组合使用的方式，用于处理具有共同属性或标记的联合类型。

可辨识联合通过在每个联合类型成员中添加一个单独的可辨识属性来区分不同的成员。
常见的可辨识属性类型是字符串字面量类型或数字字面量类型。
这个可辨识属性可以用来在使用联合类型时进行判断。

例如，考虑以下的联合类型：

type Shape = Circle | Square;

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  sideLength: number;
}

在这个例子中，Shape 是一个联合类型，它有两个成员类型 Circle 和 Square，并且每个成员都有一个 kind 属性，用于区分不同的形状。

使用类型守卫，我们可以根据可辨识属性来区分联合类型的不同成员，并进行相应的操作。类型守卫可以使用类型断言、类型谓词和关键字 in 等方式来实现。

例如，使用类型断言进行类型守卫：

function getArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
  } else if (shape.kind === "square") {
    return shape.sideLength ** 2;
  } else {
    throw Error("Invalid shape");
  }
}

在这个例子中，我们通过判断 shape.kind 的值来区分不同的形状，并进行相应的计算。

类型守卫可以提供更安全和可读性更好的代码，因为它们允许编译器进行类型推断和类型检查，而不仅仅是使用类型断言进行类型的强制转换。

总结起来，可辨识联合和类型守卫是在处理具有共同属性或标记的联合类型时的一种有效方式，在编写更安全和可读性更好的代码时非常有用。

类型守卫与函数重载

在 TypeScript 中，类型守卫（Type Guard）和函数重载（Function Overloading）可以一起使用来提供更精确的类型检查和类型推断。

类型守卫通过在特定的代码块内部进行类型检查来缩小变量的类型范围。

函数重载允许你提供多个函数签名，以便在调用时根据不同的参数类型选择合适的函数定义。

下面是一个结合了类型守卫和函数重载的示例：

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  sideLength: number;
}

type Shape = Circle | Square;

function getArea(shape: Circle): number;
function getArea(shape: Square): number;
function getArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
  } else if (shape.kind === "square") {
    return shape.sideLength ** 2;
  } else {
    throw Error("Invalid shape");
  }
}

const circle: Circle = {
  kind: "circle",
  radius: 5
};

const square: Square = {
  kind: "square",
  sideLength: 4
};

console.log(getArea(circle)); // 输出：78.53981633974483
console.log(getArea(square)); // 输出：16

在这个例子中，我们定义了两个接口 Circle 和 Square，以及一个联合类型 Shape。然后，我们使用函数重载定义了 getArea 函数，它接受不同类型的参数。根据参数的类型，函数重载使 TypeScript 能够在调用时选择合适的函数定义。

在函数主体中，我们使用类型守卫来检查 shape 的类型，并进行相应的计算。

类型守卫结合函数重载可以提高代码的类型安全性和可读性，确保在调用函数时传递正确的参数类型，并根据参数类型进行相应的处理。

总结起来，类型守卫和函数重载可以结合使用，以提供更精确的类型检查和类型推断，从而增加代码的类型安全性和可读性。

可选链操作符与空值合并运算符

在 TypeScript 中，可选链操作符（Optional Chaining Operator）和空值合并运算符（Nullish Coalescing Operator）是两个用于处理可能存在的空值或未定义值的运算符。

1. 可选链操作符（?.）

可以用于访问深层次嵌套的属性或调用可能为空或未定义的函数。
它的语法是在需要访问的属性或方法之前使用问号（?）。

• 如果属性或方法存在，则访问或调用成功，返回对应的值；
• 如果属性或方法不存在，则返回 undefined。

这样可以避免在访问可能不存在的属性或方法时引发错误。

例如：

const obj = {
  foo: {
    bar: {
      baz: "Hello"
    }
  }
};

console.log(obj?.foo?.bar?.baz); // 输出：Hello
console.log(obj?.foo?.missing?.value); // 输出：undefined

在这个例子中，我们使用可选链操作符来安全访问 obj 对象中的深层嵌套属性。

2. 空值合并运算符（??）

用于从一系列可能为空或未定义的值中选择第一个非空值。

如果左侧的值为 null 或 undefined，则返回右侧的值。如果左侧的值非空，则返回左侧的值。

例如：

const name = null;
const fallbackName = "John";

const result = name ?? fallbackName;
console.log(result); // 输出：John

在这个例子中，我们使用空值合并运算符来选择 name 变量的值作为结果。如果 name 是 null 或 undefined，则返回 fallbackName 作为结果，否则返回 name。

可选链操作符和空值合并运算符是 TypeScript 的两个实用的特性，它们能够简化代码并提供更安全的空值处理机制。它们在处理可能存在的空值或未定义值时非常有用。

附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

Vue.js 和 Egg.js 开发企业级健康管理项目
带你从入门到实战全面掌握 uni-app