TS‘类型断言‘有啥用

我在菜鸟教程上看的是这么解释的:

类型断言：可以用来手动指定一个值得类型,即允许变量从一种类型更改为另一种类型。

语法格式：

(1) <类型>值

(2)值 as 类型

我就在想，一种类型更改成另一种类型,就靠手写一个这就行了?后来我看到一篇文章(链接给大家放到这里: typescript中类型断言理解 - 黑色瓶子 - 博客园),他是这么说的"类型断言更像是类型的选择,而不是类型的转换",这句话一下就解释通了,并且举了一个简单的例子:

function func(val: string | number) :number {
    if (val.length) {
        return val.length
    } else {
        return val.toString().length
    }
}

func函数的参数val是一个联合类型,意思是val可以是字符串类型,也可以是数值类型的,函数中返回的是val的长度,number类型是没有长度的,所以进行了一个类型转换toString(),这时候获取val的长度,乍一看代码没问题,但是官网文档里解释联合类型是这样说的:联合类型:我们只能访问此联合类型的所有类型里共有的成员。

那么就是说,length应该是string和number共有的属性才对,但是number没有length的属性,所以上述代码放在ts文件里,if语句中的length就会报错(“number”上不存在属性“length”)

(注:为了防止自己忘记,所以写在这里当做笔记看)

TS更加严谨,在我们书写代码的时候,就要把变量的类型给手动确定下来,所以菜鸟教程上说:可以用来手动指定一个值得类型,后面的那一句让人有点混淆。

上述的代码正确的写法应该是这样：

function func(val: string | number) :number {
    if ((val as string).length ) {
        return (val as string).length
    } else {
        return val.toString().length
    }
}

或者是这样：

function func(val: string | number) :number {
    if ((<string>val).length ) {
        return (<string>val).length
    } else {
        return val.toString().length
    }
}

但是更倾向于第一种写法，因为在jsx语法中，只支持 值 as 类型

(注:为了防止自己老是记不清楚,当笔记写在这里)

TS‘类型断言‘有啥用

猜你喜欢