TypeScript 之类型窄化篇

前端

2023-09-01 09:16:44

TypeScript 最好用的地方就是强类型，随之而来的就是类型窄化。类型窄化可以让我们在运行时缩小变量的类型。这可以让我们写出更安全、更可靠的代码。

TypeScript 中有几种方法可以实现类型窄化。其中一种方法是使用类型保护。类型保护是一种检查变量类型的语法结构。我们可以使用类型保护来检查变量是否属于某个类型。

另一种实现类型窄化的方式是使用类型转换。类型转换可以将变量从一种类型转换为另一种类型。我们可以使用类型转换来将变量转换为更具体的类型。

最后，我们还可以使用类型别名来实现类型窄化。类型别名可以为一种类型定义一个新的名称。我们可以使用类型别名来创建更易于阅读和理解的类型。

类型窄化是一个非常强大的工具，它可以帮助我们编写出更安全、更可靠的代码。我们可以通过使用类型保护、类型转换和类型别名来实现类型窄化。

类型保护

类型保护是一种检查变量类型的语法结构。我们可以使用类型保护来检查变量是否属于某个类型。

类型保护有几种不同的形式。其中一种形式是使用 if 语句。我们可以使用 if 语句来检查变量是否属于某个类型。如果变量属于该类型，那么我们就执行 if 语句中的代码。否则，我们就跳过 if 语句中的代码。

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

if (isString(value)) {
  console.log(value.toUpperCase());
}

另一种形式的类型保护是使用 switch 语句。我们可以使用 switch 语句来检查变量是否属于某个类型。如果变量属于该类型，那么我们就执行 switch 语句中的代码。否则，我们就跳过 switch 语句中的代码。

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

switch (typeof value) {
  case "number":
    console.log(value.toFixed(2));
    break;
  case "string":
    console.log(value.toUpperCase());
    break;
  default:
    console.log("Unknown type");
}

类型转换

类型转换可以将变量从一种类型转换为另一种类型。我们可以使用类型转换来将变量转换为更具体的类型。

类型转换有几种不同的形式。其中一种形式是使用 as 。我们可以使用 as 关键字来将变量转换为另一种类型。

const value = "123";
const number = value as number;

console.log(number + 1); // 124

另一种形式的类型转换是使用 <> 运算符。我们可以使用 <> 运算符来将变量转换为另一种类型。

const value = "123";
const number = <number>value;

console.log(number + 1); // 124

类型别名

类型别名可以为一种类型定义一个新的名称。我们可以使用类型别名来创建更易于阅读和理解的类型。

type StringOrNumber = string | number;

function add(a: StringOrNumber, b: StringOrNumber): StringOrNumber {
  if (typeof a === "string" || typeof b === "string") {
    return a.toString() + b.toString();
  } else {
    return a + b;
  }
}

console.log(add("1", 2)); // "12"
console.log(add(1, 2)); // 3