typescript中类型断言理解

阿门啊 發表於 2019-10-18 11:15:00

typescript很强大，但是用不好时也会很头痛，开发遇到类型错误的情况不在少数，或许你需要了解类型断言。使用断言，简单来说就是先做好一个假设，使得编译通过。
我一开始接触类型断言时是有点不明白的，后来我了解到原因是 “类型断言更像是类型的选择，而不是类型转换”。我发现不少博客文章里把类型断言说成了类型转换，这在最开始给我带来了一些困扰。
 
使用类型断言有两种方式：
<div class="cnblogs_code">
<pre><类型>值

// 或者

值 as 类型</pre>
</div>
 
推荐以 as 方式，因为 jsx 这样的语法中只支持 as 方式。
 
我们还得知道什么时候来使用类型断言，但是这个我没办法一一列举出来，主要因为我也没有很多使用typescript的经验。但是可以举一个最直观的例子：
<div class="cnblogs_code">
<pre>function func(val: string | number): number {
if (val.length) {
return val.length
} else {
return val.toString().length
}
}</pre>
</div>
函数的参数 val 是一个联合类型，在这里的意思是说 val 可以是字符串类型也可以是数值类型。代码中要返回参数的长度，但是 length 可以是字符串的属性，而数值是没有这个属性的，所以当 val 是数值时，就先用 toSting() 来将数字转换为字符串再取长度。这样的逻辑本身没问题，但是在编译阶段一访问 val.length 时就报错了，因为 访问联合类型值的属性时，这个属性必须是所有可能类型的共有属性，而length不是共有属性，val 的类型此时也没确定，所以编译不通过。为了通过编译，此时就可以使用类型断言了，如下：
<div class="cnblogs_code">
<pre>function func(val: string | number): number {
if ((<string>val).length) {
return (<string>val).length
} else {
return val.toString().length
}
}

或者

function func(val: string | number): number {
if ((val as string).length) {
return (val as string).length
} else {
return val.toString().length
}
}</pre>
</div>
 
例子中，把 val 断言为了 string类型，此时就可以访问 length 属性了。你可能会疑惑如果 val 断言为了string，那么开始定义的联合类型是不是失去了它的意义？答案是否定的。我在一开始就说了类型断言不是类型转换，而是类型选择，可以理解为在编译阶段强行把 val 当作 string类型来访问了。
 
以上就是我对类型断言的一些了解，如有不对，欢迎指出。
  
来源：https://www.cnblogs.com/wjaaron/p/11697275.html

頁: [1]

琼殿技术论坛's Archiver

typescript中类型断言理解