5 种在 TypeScript 中使用的类型保护

2022 年 6 月 17 日
本文字数：2764 字
阅读完需：约 9 分钟

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

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

TypeScript 使用了一些内置的 JavaScript 操作符，比如 typeof、instanceof 和 in 操作符，这些操作符用于确定一个对象是否包含属性。类型保护可以让你指导 TypeScript 编译器在特定的上下文中推断出变量的特定类型，确保参数的类型与你所说的一致。

类型保护通常用于缩小类型，它非常类似于特征检测，允许您检测值的正确方法、原型和属性。因此，您可以轻松地找出如何处理该值。

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

关键字实例
类型关键字
在关键字中
等式收缩式保护器
带有谓词的自定义类型保护

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

instanceof 类型保护

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 或 bracelet 对象，因为它们都实现了 Accessory 接口。Necklace 和 bracelet 的构造函数签名是不同的，用 instanceof 比较两个构造函数签名可以有效地确定类型。

类型保护

typeof 类型保护是用来确定变量的类型。typeof 的类型保护据说是非常有限和浅薄的。它只能确定以下 JavaScript 能识别的类型：

布尔
字符串
比金特
象征
定义
功能
数

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

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


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

复制代码

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

在下面的示例中，StudentId 有一个字符串|number 类型联合参数条目。我们看到，如果变量是 string，则输出 Student，如果是 number，则输出 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 类型保护

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

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


propertyName in objectName

复制代码

在下面的例子中，in 类型守卫检查 house 属性是否存在。如果存在，则返回布尔值 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 类型保护来解决，然而，您可以在绝对必要的时候使用自定义类型保护。

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

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/3514c5ec037ef5299e4645942】。文章转载请联系作者。

华为云开发者联盟

关注

提供全面深入的云计算技术干货 2020.07.14 加入

华为云开发者社区，提供全面深入的云计算前景分析、丰富的技术干货、程序样例，分享华为云前沿资讯动态，方便开发者快速成长与发展，欢迎提问、互动，多方位了解云计算！传送门：https://bbs.huaweicloud.com/

发布

暂无评论

创作场景

5 种在 TypeScript 中使用的类型保护

instanceof 类型保护

类型保护

in 类型保护

等式收缩保护器

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

结尾

华为云开发者联盟

评论