华为云社区《如何在TypeScript中使用类型保护》(一)

总结：在本文中，我回顾了 TypeScript 中一些最有用的类型保护，并通过几个示例来了解它们的实际应用。

本文分享自华为云社区《如何在TypeScript中使用类型保护》，作者：Ocean2022。

类型保护是一种用于获取变量类型信息的 TypeScript 技术，通常用于条件块语句中。类型保护是返回布尔值的常规函数​​，接受一个类型并告诉 TypeScript 是否可以缩小到更具体的类型。类型保护具有唯一属性，可确保测试值是根据返回的布尔值设置的类型。

TypeScript 使用了一些内置的 JavaScript 运算符，例如 typeof、instanceof 和 in 运算符，用于确定对象是否包含属性。类型保护允许您指示 TypeScript 编译器在特定上下文中推断变量的特定类型，确保参数的类型与您所说的相同。

类型保护通常用于缩小类型范围，与特征检测非常相似，允许您检测值的正确方法、原型和属性。所以你可以很容易地弄清楚如何处理这个值。

使用类型保护的主要方法有五种：

在本文中，我们将探讨上面列出的 5 种方法。让我们开始吧！

类型保护的实例

Instanceof 是一个内置的类型保护器，可用于检查一个值是否是给定构造函数或类的实例。有了这个类型守卫，我们可以测试一个对象或值是否是从一个类派生的，这对于确定实例类型的类型很有用。

instanceof类型保护的基本语法如下：

objectVariable instanceof ClassName;

在下面的例子中，我们看到了一个 instanceof 类型守卫的例子：

interface Accessory {
    brand: string;
  }
  class Necklace implements Accessory{
    kind: string;
    brand: string;
    constructor(brand: string, kind: string) {    
      this.brand = brand;
      this.kind = kind;
    }
  }
  class bracelet implements Accessory{
    brand: string;
    year: number;
    constructor(brand: string, year: number) {    
      this.brand = brand;
      this.year = year;
    }
  }
  const getRandomAccessory = () =>{
    return Math.random() < 0.5 ?
      new bracelet('cartier', 2021) :
      new Necklace('choker', 'TASAKI');
  }
  let Accessory = getRandomAccessory();
  if (Accessory instanceof bracelet) {
    console.log(Accessory.year);
  }
  if (Accessory instanceof Necklace) {
    console.log(Accessory.brand);    
  }

上面的 getRandomAccessory 函数返回一个 Necklace 或手镯对象，因为它们都实现了 Accessory 接口。 Necklace和手镯的构造函数签名不同，用instanceof比较两个构造函数签名可以有效判断类型。

typeof 类型保护

typeof 类型保护用于确定变量的类型。据说 Typeof 的类型保护非常有限且肤浅。它只能判断 JavaScript 识别的以下类型：

对于此列表之外的任何内容，typeof 类型保护只返回对象。

typeof 类型保护可以用两种方式编写：

typeof v !== "typename"
#or 
typeof v === "typename"

typename 可以是字符串、数字、符号或布尔值。

在下面的示例中，StudentId 有一个字符串|数字类型的联合参数条目。我们看到，如果变量是字符串，则输出 Student，如果是数字，则输出 Id。 typeof 类型保护器帮助我们从 x 参数中提取类型：

function StudentId(x: string | number) {
    if (typeof x == 'string') {
        console.log('Student');
    }
    if (typeof x === 'number') {
        console.log('Id');
    }
}
StudentId(`446`); //prints Student
StudentId(446); //prints Id

类型保护

in type guard 检查对象是否具有特定属性并使用该属性来区分不同类型。它通常返回一个布尔值，指示该属性是否存在于对象中。它用于缩小范围，以及检查浏览器支持。

in类型保护的基本语法如下：

propertyName in objectName

在以下示例中，in 类型守卫检查房屋属性是否存在。如果存在则返回布尔值 true，如果不存在则返回 false。

"house" in { name: "test", house: { parts: "door" } }; // => true
"house" in { name: "test", house: { parts: "windows" } }; // => true
"house" in { name: "test", house: { parts: "roof" } }; // => true
"house" in { name: "test" }; // => false
"house" in { name: "test", house: undefined }; // => true

下面是另一个类似的 in 类型守卫示例：

interface Pupil {
    ID: string;
  }
  interface Adult {
    SSN: number;
  }
  interface Person {
    name: string;
    age: number;
  }
  let person: Pupil | Adult | Person = {
    name: 'Britney',
    age: 6
  };
  const getIdentifier = (person: Pupil | Adult | Person) => {
    if ('name' in person) {
      return person.name;
    }
    else if ('ID' in person) {
      return person.ID
    }
    return person.SSN;
  }

方程式收缩保护器

等式收缩保护器检查表达式的值。为了使两个变量相等，两个变量必须是相同的类型。如果一个变量的类型未知，但它等于另一个具有确切类型的变量，Typescript 使用已知变量提供的信息来缩小第一个变量的类型：

function getValues(a: number | string, b: string) {
    if(a === b) {
        // this is where the narrowing takes place. narrowed to string
        console.log(typeof a) // string
    } else {
        // if there is no narrowing, type remains unknown
        console.log(typeof a) // number or string
    }
}

如果变量 a 等于变量 b，则两者必须具有相同的类型。在这种情况下，Typescript 将其缩小为字符串。如果没有收缩，a 的类型仍然是不明确的，因为它可以是数字或字符串。

带有谓词的自定义类型保护

创建自定义类型保护通常是使用类型保护的强大选项。当您通过自己编写自定义类型保护来创建它时，可以检查的内容没有限制。但是，如果自定义类型保护编写不正确，可能会引入很多错误。因此，精度是关键。

自定义类型保护的示例如下所示：

interface Necklace{
    kind: string;
    brand: string;
}
interface bracelet{
    brand: string;
    year: number;
}
type Accessory = Necklace | bracelet;
const isNecklace = (b: Accessory): b is Necklace => {
    return (b as Necklace).kind !== undefined
}
const Necklace: Accessory = {kind: "Choker", brand: "TASAKI"};
const bracelet: Accessory = {brand: "Cartier", year: 2021};
console.log(isNecklace(bracelet)) //Logs false
console.log(isNecklace(Necklace)) //Logs true

在上面的代码中，类型谓词 b 是 Necklace，它会告诉 TypeScript 将类型简化为 Necklace，而不是仅仅返回一个布尔值。

结束

TypeScript 类型保护有助于确保类型值并改善整体代码流。在本文中，我们回顾了 TypeScript 中一些最有用的类型保护，并通过一些示例来了解它们的实际应用。

大多数情况下，您的用例可以使用 instanceof 类型保护、tyoeof 类型保护或 in 类型保护来解决，但是您可以在绝对必要时使用自定义类型保护。

点击关注，第一时间了解华为云新技术~