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

更新日期: 2022-06-17阅读: 680标签: TypeScript
本文分享自华为云社区《 如何在TypeScript中使用类型保护 》,作者:Ocean2022。

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

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

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

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

instanceof
typeof
in

在本文中,我们将探索上面列出的 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 类型保护是用来确定变量的类型。 typeof 的类型保护 据说是非常有限和浅薄的 。它只能确定以下JavaScript能识别的类型:

  • Boolean
  • String
  • Bigint
  • Symbol
  • Undefined
  • Function
  • Number

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

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

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

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

在下面的示例中, StudentId 有一个 string|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 类型保护来解决,然而,您可以在绝对必要的时候使用自定义类型保护。

链接: https://www.fly63.com/article/detial/11756

用TypeScript弥补Elm和JavaScript之间的差距

近些日子,我使用了新语言编程,从JavaScript,切确地说是Elm,转成TypeScript。在本文中,我将继续深挖一些我非常喜欢的TypeScript特性。

Typescript 和 Javascript之间的区别

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?

Nerv_一款类 React 前端框架,基于虚拟 DOM 技术的 JavaScript(TypeScript) 库

Nerv_是一款由京东凹凸实验室打造的类 React 前端框架,基于虚拟 DOM 技术的 JavaScript(TypeScript) 库。它基于React标准,提供了与 React 16 一致的使用方式与 API。

TypeScript_TS系列之高级类型

交叉类型:将多个类型合并为一个类型、联合类型:表示取值可以为多种类型中的一种、混合类型:一个例子就是,一个对象可以同时做为函数和对象使用,并带有额外的属性、类型断言:可以用来手动指定一个值的类型

TypeScript 在 JavaScript 的基础上的改动

在做比较大的,多人合作的项目的时候,TypeScript会更加地适合,这得益于它的可读性,面向对象性以及易于重构的特点。但如果只是自己做小程序,不需要太多人参与的时候,JavaScript则会更加简单。

5分钟了解TypeScript

有两种方式安装TypeScript,如何创建第一个TypeScript文件,在TypeScript中,可以使用interface来描述一个对象有firstName和lastName两个属性,TypeScript支持JavaScript的新功能,其中很重要的一个功能就是基于类的面向对象编程

如何编写 Typescript 声明文件

使用TypeScript已经有了一段时间,这的确是一个好东西,虽说在使用的过程中也发现了一些bug,不过都是些小问题,所以整体体验还是很不错的。有关TypeScript声明类型声明相关的目前就总结了这些比较常用的

谷歌为何会选用TypeScript?

谷歌在很早之前就张开双臂拥抱 Web 应用程序,Gmail 已经发布 14 年了。当时,JavaScript 的世界是疯狂的。Gmail 工程师不得不为 IE 糟糕的垃圾回收算法捏一把汗,他们需要手动将字符串文字从 for 循环中提取出来,以避免 GC 停顿

为什么要学习Typescript 语言呢?Typescript 开发环境安装

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。

使用TypeScript两年后-值得吗?

差不多两年前,我在一个创业团队中开始了一个全新的项目。用到的全都是类似Microservices,docker,react,redux这些时髦的东西。我在前端技术方面积累了一些类似的经验

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!