TS自定义守卫

93 阅读 0 评论 62 点赞

我是靠谱客的博主结实芝麻，这篇文章主要介绍TS自定义守卫，现在分享给大家，希望可以做个参考。

自定义守卫格式

复制代码

1
2
3
4
5

function 函数名(形参: 参数类型[参数类型大多为any]): 形参 is A类型 = boolean + 类型守卫能力 {
return true or false
}

理解：返回布尔值的条件表达式赋予类型守卫的能力，只有当函数返回true时，形参被确定为A 类型
自定义守卫的重要意义：编码展示其具体意义

这里解释一下守卫的功能是什么

没有类型守卫时：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class StringUtil {
public static trimSpace(str: string) : string {
return str.replace(/s+/g, "")
}
}
function processObj(obj: any) {
if (obj && "name" in obj) {
let value
Object.keys(obj).forEach((key)=> {
value = obj[key]
// 我们想要str.length方法， 但是value. 代码是没有提示的，因为是属于any
console.log(value.);
})
}
}

具有守卫时：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class StringUtil {
public static trimSpace(str: string) : string {
return str.replace(/s+/g, "")
}
}
function processObj(obj: any) {
if (obj && "name" in obj) {
let value
Object.keys(obj).forEach((key)=> {
value = obj[key]
if(typeof value === "string") {
// 我们想要str.length方法， 但是value. 代码是有提示的字符串可以跟哪一些属性的
console.log(value.length);
}
})
}
}

下面这段代码的类型守卫是可以的，但是我们在开发中实际应用的话，
是不能这样使用的，可维护性不好

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class StringUtil {
public static trimSpace(str: string) : string {
return str.replace(/s+/g, "")
}
}
function processObj(obj: any) {
if (obj && "name" in obj) {
let value
Object.keys(obj).forEach((key)=> {
value = obj[key]
if(typeof value === "string") {
// 我们想要str.length方法， 但是value. 代码是有提示的字符串可以跟哪一些属性的
console.log(value.length);
}
})
}
}

改成下面的代码，会发现一个问题 value.拿不到字符串上面的属性方法了
为什么没有生效呢？
原理很简单，这个方法是在内部生效的，但是这个方法还没有运行
if (isString(value))
**value.**能拿到字符上的属性提前是 **isString(value)**运行了，很明显它是没有运行的

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class StringUtil {
public static trimSpace(str: string): string {
return str.replace(/s+/g, "")
}
}
function isString(str: any): boolean {
return typeof str === "string"
}
function processObj(obj: any) {
if (obj && "name" in obj) {
let value
Object.keys(obj).forEach((key) => {
value = obj[key]
if (isString(value)) {
console.log(value.);
// console.log(key + ":", StringUtil.trimSpace(value.));
}
})
}
}

接下来使用上文的自定义守卫
这样我们就可以拿到**value.**能拿到字符上的属性了

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function isString(str: any): str is
string {
return typeof str === "string"
}
function processObj(obj: any) {
if (obj && "name" in obj) {
let value
Object.keys(obj).forEach((key) => {
value = obj[key]
if (isString(value)) {
console.log(value.length);
}
})
}
}