你搞得清楚TS中的类型断言与类型守卫吗？

前言

前面我们介绍了TS中的类型：

1. 在TS中，与JS相对应数据类型
2. 与JS相比，TS多了哪些类型

今天我们来搞清楚在TS中的两个概念：类型断言与类型守卫

例子

先来看个例子

代码语言：javascript复制

type User = {
    name: string;
    age: number;
}
function showUser(user: User) {
    console.log(user.name);
    console.log(user.age);
}
showUser({ name: 'Alice', age: 12 })
复制代码

如上，showUser函数执行传递的参数是符合类型要求的。但是如果不符合要求的参数就会报错

代码语言：javascript复制

let errorType = '';
showUser(errorType); //错误
复制代码

正常编写代码一般不会出这样的问题，但是这个数据有可能来自运行时的其他地方（比如数据库、第三方库、用户输入等）。

我们知道语言在运行时是不具有类型的，那我们在运行时如何保证和检测来自其他地方的数据也符合我们的要求呢？

这就类型断言要干的事

类型断言

所谓断言就是断定、确定、绝对的意思；所以简单来讲，类型断言就是保证数据类型一定是所要求的类型

类型守卫

类型断言还需要借助类型守卫函数，类型守卫函数就是用于判断未知数据是不是所需类型

代码语言：javascript复制

function isUser(arg: any): arg is User {
    if (!arg) {
        return false;
    }
    else {
        if (typeof arg.name == 'string' && typeof arg.age == 'number') {
            return true;
        } else {
            return false;
        }
    }
}
复制代码

可以看到类型守卫函数与普通函数没多大区别，唯一需要注意其返回值类型比较特殊特殊，格式：x is y ,表示x是不是y类型

代码语言：javascript复制

if (isUser(errorType)) {
    showUser(errorType);
}
复制代码

经过这样的类型断言后就不会报错了

END

以上就是本文的所有内容

数据类型

0 人点赞