TypeScript联合类型,交叉类型和类型保护怎么理解

技术TypeScript联合类型,交叉类型和类型保护怎么理解本篇内容介绍了“TypeScript联合类型,交叉类型和类型保护怎么理解”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学

本文介绍了“如何理解TypeScript联合类型、交叉类型和类型保护”的相关知识。在实际的案件操作过程中,很多人都会遇到这样的困难。接下来,让边肖带领大家学习如何应对这些情况!希望大家认真阅读,学点东西!

00-1010所谓联合类型就是定义一些类型,定义的变量只需要满足任意类型即可。联合类型由|定义,示例代码如下:

//通过|符号定义联合类型。

Let:数字|布尔值|字符串='一碗周'

Value=18在上面的代码中,我们定义了一个值变量,它可以是数字、布尔值或字符串类型。

1.联合类型

引入了union类型,然后引入了与它特别相似的cross类型。

所谓十字型,就是所有的类型都需要满足,十字型是用符号定义的。

示例代码如下:

//定义三种常见的接口类型

interfaceName{

名称:字符串

}

界面页面{

年龄:数字

}

界面爱好(

霍布斯:字符串

}

//定义一个对象,它是以上三个对象的并集类型。

letperson : namagehobby={ 0 }

//如果少分配一个类型,将引发异常

名称: '一周一碗',

年龄:18,

hobby: '编码',

}

2.交叉类型

现在我们有一个需求:获取任意类型数组中的第一个数字。

实现代码如下:

//定义包含数字或字符串的数组。

Constarr :(数字|字符串)[]=[1,'数字']

//遍历数组返回第一个数字

const getvalue :(arr :(number | string)[])=number=(

arr:(数字|字符串)[],

):number={

for(leti=0;长度;I){ 0

//如果当前值转换为数字时不是NaN,则返回。

if(!isNaN(数字(arr[I])){ 0

returnrr[I]//类型“字符串|数字”不能分配给类型“数字”。

}

}

}当您在上面的代码中返回时,您不知道是否返回了数字类型。所以会抛出一个异常。

上述功能可以通过类型断言来完成,示例代码如下:

const getvalue :(arr :(number | string)[])=number=(

arr:(数字|字符串)[],

):number={

for(leti=0;长度;I){ 0

nbsp;   // 如果当前值转换为数字时候不是一个 NaN 则返回
    if (!isNaN(Number(arr[i]))) {
      return arr[i] as number // 告诉 编译器 我返回的就是一个 number
    }
  }
}

什么是类型断言请参考:类型断言

如果使用类型断言来说明,如果想要的数据类型不一样时,就会显得比较繁琐。这个时候就需要类型保护来完成该功能,

类型保护主要分为以下三种:

3.1自定义类型保护

自定义类型保护的方式就是定义一个函数,该函数是的返回结构是一个parameterName is type的形式,该形式是一个类型谓词 。parameterName必须是来自于当前函数参数里的一个参数名。

示例代码如下:

// 使用自定义类型保护
// 1. 定义一个函数 其返回值是一个 类型谓词,即 parameterName is Type 也就是 参数名 is 类型 的形式
function isNumber(value: number | string): value is number {
  // 如果返回 true 则说明 传入的 value 是 is 后面的type
  return !isNaN(Number(value))
}
// 2. 定义一个获取数字的函数
const getNumber: (value: number | string) => number = (
  value: number | string,
): number => {
  // 如果调用 isNumber 的值为 true 则说明 value 是一个数字,所以将数字返回
  if (isNumber(value)) {
    return value
  }
}
// 3. 调用获取最终的数值
const getValue: (arr: (number | string)[]) => number = (
  arr: (number | string)[],
): number => {
  for (let i = 0; i < arr.length; i++) {
    // 如果返回数字,转换为 boolean 值为 true
    if (getNumber(arr[i]) || getNumber(arr[i]) === 0) {
      return getNumber(arr[i])
    }
  }
}

定义第二个函数的原因是在数组中直接使用i作为返回值还是有问题的,所以定义一个函数过渡一下。

3.2typeof 类型保护

JavaScript 中的typeof关键字可以判断当前类型,但是仅仅只能判断numberstringbooleansymbol四种类型。

在这个需求中就足够了,接下来我们看看如何通过typeof来实现类型保护。

示例代码如下:

// 1. 定义一个获取数字的函数
const getNumber: (value: number | string) => number = (
  value: number | string,
): number => {
  // 判断当前是否为字符串,如果是返回当前值
  if (typeof value === 'number') {
    return value
  }
}
// 2. 调用获取最终的数值
const getValue: (arr: (number | string)[]) => number = (
  arr: (number | string)[],
): number => {
  for (let i = 0; i < arr.length; i++) {
    // 如果返回数字,转换为 boolean 值为 true
    if (getNumber(arr[i]) || getNumber(arr[i]) === 0) {
      return getNumber(arr[i])
    }
  }
}

3.3instanceof类型保护

instanceof操作符也是JavaScript中提供的原生操作符,它用来判断一个实例是不是某个构造函数创建的,或者是不是使用ES6语法的某个类创建的。在TypeScript中也可以通过instanceof操作符来实现类型保护,

示例代码如下:

/**
 * 由于 instanceof 仅仅支持引用类型,不支持原始类型,所以说这里需要进行一下改动,将数组修改为如下:
 */
const arr2: (Number | String)[] = [new String('彼岸繁華'), new Number(10)]
// 1. 定义一个获取数字的函数
const getNumber: (value) => number = (value): number => {
  // 判断当前是否为 Number 类型,将当前值转换为字符串返回
  if (value instanceof Number) {
    return Number(value)
  }
}
// 2. 调用获取最终的数值
const getValue: (arr: (Number | String)[]) => number = (
  arr: (Number | String)[],
): number => {
  for (let i = 0; i < arr.length; i++) {
    // 如果返回数字,转换为 boolean 值为 true
    if (getNumber(arr[i]) || getNumber(arr[i]) === 0) {
      return getNumber(arr[i])
    }
  }
}

使用instanceof时需要注意一下两点:

  • 只适应于任何引用类型,不支持原始类型。

  • 前者的原型链上是否 包含 后者的原型对象。

“TypeScript联合类型,交叉类型和类型保护怎么理解”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站,小编将为大家输出更多高质量的实用文章!

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/141695.html

(1)

相关推荐

  • javascript条件式访问属性和箭头函数的示例分析

    技术javascript条件式访问属性和箭头函数的示例分析这篇文章主要介绍了javascript条件式访问属性和箭头函数的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编

    攻略 2021年11月14日
  • 抖音免费涨粉丝网站,抖音涨人气方法介绍?

    技术抖音免费涨粉丝网站,抖音涨人气方法介绍?玩抖音的人应该更关注粉丝的数量。对于普通人来说,粉丝的数量也是用来填满大门的,最多是为了赢得人气。但是对于一些真正了解抖音的人来说,抖音刷粉丝们的这些简单的词汇并没有简单的含义

    测评 2021年10月21日
  • nodejs中事件模块提供了什么对象

    技术nodejs中事件模块提供了什么对象这篇文章给大家分享的是有关nodejs中事件模块提供了什么对象的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 在nodejs

    攻略 2021年11月11日
  • 怎么通过Java代码来理解RPC

    技术怎么通过Java代码来理解RPC本篇内容主要讲解“怎么通过Java代码来理解RPC”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么通过Java代码来理解RPC”吧!这整

    攻略 2021年11月15日
  • 让Python代码加速起飞的方法有哪些

    技术让Python代码加速起飞的方法有哪些本篇内容介绍了“让Python代码加速起飞的方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔

    攻略 2021年10月20日
  • HttpServletResponse与HttpServletRequest

    技术HttpServletResponse与HttpServletRequest HttpServletResponse与HttpServletRequest一、HttpServletResponse

    礼包 2021年11月11日