ts中类型约束,联合类型转换成单一类型

问题描述:从后端获取或者从其他页面携带的参数需要在某一页面获取,获取到的值可能是联合类型,类似于这样 string|string[] 亦或者是这样number|undefined,而ts有着严格的类型声明,这时我们需要使用这个值时vscode就会报错。

解决办法:那么如何将这种联合类型string|string[]转成单一类型string呢,解决办法就是利用ts中的as类型断言来告诉解析器变量的实际类型。

这里展示一下我遇到的实际问题

分析问题:

我这里的id是获取的从列表页通过路由携带的参数,获取的值类型是string或者string[]

f23bacdffede4c168f6ecee65a833bd4.png

由于后端获取详情需要的id参数为number类型,所以用parseInt进行转换,结果编译器会爆红显示不能将string[]变成string(因为string类型才可以通过parseInt方法将string转换成number) 1539d77f40dd41b4843715316cd3614a.png

 解决办法:我们只需要使用 as 类型断言就可以解决了,这里就是把route.params.id的类型转成了string然后通过parseInt方法最终将其变成了number类型

90c9b12a0e7a4666b76eb0b5a9f09f1a.png

扫描二维码关注公众号,回复: 17029191 查看本文章

 说明:这个转换只适用于编译器默认推断而产生的类型转换,如果是自己定义的就不能进行转换了(当然代码变量都是自己定义的类型肯定会按照自己需要的样子来写嘛就不会产生这样有歧义的情况了也不会来搜这个问题啦)


也挺感慨的,之前学ts也学过类型断言来着,一直没有使用场景然后几乎都忘了,这次做项目突然遇到这个问题用到了这个类型断言,所以想着记录一下。


顺便提一下:

类型断言,可以用来告诉解析器变量的实际类型

语法:变量 as 类型
           <类型>变量 

let e: unknown;
let s: string;

s = e as string;
s = <string>e

具体ts相关的其他详细知识可以参考我的另一篇文章:TypeScript学习笔记_lilil_jing的博客-CSDN博客

猜你喜欢

转载自blog.csdn.net/m0_53703061/article/details/129454976