首页 前端知识 TypeScript 类型守卫(typeof / in / instanceof / 等式收缩守卫 / 带有谓词的自定义类型守卫)通俗易懂的用法详细讲解

TypeScript 类型守卫(typeof / in / instanceof / 等式收缩守卫 / 带有谓词的自定义类型守卫)通俗易懂的用法详细讲解

2024-05-07 13:05:12 前端知识 前端哥 319 909 我要收藏

介绍

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

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

类型守卫非常类似于特征检测,允许您检测值原型和属性。

类型保护是可执行运行时检查的一种表达式,用于确保该类型在一定的范围内。 换句话说,类型保护可以保证一个字符串是一个字符串,尽管它的值也可以是一个数值。类型保护与特性检测并不是完全不同,其主要思想是尝试检测属性、方法或原型,以确定如何处理值。

实现方式

有五种主要的方式来使用类型守卫:

  1. instanceof关键字
  2. typeof关键字
  3. in关键字
  4. 等式收缩式守卫
  5. 带有谓词的自定义类型守卫

instanceof

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

instanceof的基本语法如下:

objectVariable instanceof ClassName;

在下面的例子中,我们看到了一个instanceof的例子:

interface Accessory {
    brand: string;
  }
  // implements
  // TypeScript 中的 implements 和 extends 在后续章节中进行单独讲解
  // 实现,一个新的类,从父类或者接口实现所有的属性和方法,同时可以重写属性和方法,包含一些新的功能
  // 一个类通过关键字implements声明自己使用一个或者多个接口。
  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可以是字符串、数字、符号或布尔值。

function padLeft(value: string, padding: string | number) {
  if (typeof padding === "number") {
      return Array(padding + 1).join(" ") + value;
  }
  if (typeof padding === "string") {
      return padding + value;
  }
  throw new Error(`Expected string or number, got '${padding}'.`);
}

typeof 类型保护只支持两种形式:typeof v === "typename"typeof v !== typename,“typename” 必须是 “number”, “string”, “boolean” 或 “symbol”。 但是 TypeScript 并不会阻止你与其它字符串比较,语言不会把那些表达式识别为类型保护。

in

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

基本语法如下

propertyName in objectName

在下面的例子中,in 检查 geely 属性是否存在。如果存在,则返回布尔值true,如果不存在,则返回false。

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

另一种形式的例子

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;
}

创建三个接口类型,person可以接受任意一种数据类型,getIdentifier根据传入的对象来判断属性是否存在于person,根据条件优先级返回对应的结果

等式收缩守卫

等式收缩守卫检查表达式的值。为了使两个变量相等,两个变量必须是同一类型的。如果一个变量的类型未知,但它等于另一个具有精确类型的变量,那么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类型守卫的几种方式,ts的类型守卫入门教程,ts类型守卫简单的教程,Typescript - 类型守卫(typeof / in / instanceof / 自定义类型保护的类型谓词)通俗易懂详细教程。ts typeof 用法,ts in 用法,ts instanceof 关键字用法,ts 自定义类型保护的类型谓词。TypeScript类型守卫,ts 类型守卫是什么,TypeScript 类型守卫(typeof / in / instanceof / 等式收缩守卫 / 带有谓词的自定义类型守卫)通俗易懂的用法详细讲解ts类型守卫的方式教程,ts中的类型守卫是干啥的,typescript 类型守卫详细讲解教程,typescript类型守卫是什么?typescript类型守卫,TypeScript 类型守卫(typeof / in / instanceof / 等式收缩守卫 / 带有谓词的自定义类型守卫)通俗易懂的用法详细讲解。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7353.html
评论
发布的文章

exceljs

2024-05-11 10:05:00

Java研学-JSON与AJAX

2024-05-10 22:05:37

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!