本文介绍了“如何理解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关键字可以判断当前类型，但是仅仅只能判断number、string、boolean和symbol四种类型。
在这个需求中就足够了，接下来我们看看如何通过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