联合类型_类型断言

最新推荐文章于 2024-02-21 00:08:15 发布

目标达成

最新推荐文章于 2024-02-21 00:08:15 发布

阅读量1.1k

点赞数

分类专栏： typescript 文章标签： typescript 联合类型类型断言

本文链接：https://blog.csdn.net/liucai1018/article/details/100776233

版权

typescript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>联合类型以及类型断言</title>
        <script src="unionType.js"></script>
    </head>
    <body>
    </body>
</html>

//联合类型
let union:string|number;
union = 1;
union = '1';
// union = true;//非string或number

//联合类型的类型推论:联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型
let union2:string|number = '1';//这个时候推论为string类型
//这个时候union2是string类型，可以使用string的一些方法
union2.length;
union2 = 2;//赋值为number类型
// union2.length;//error:现在是number类型，不能调用string的方法

//访问联合类型的属性或方法
//当不确定联合类型目前的类型时：只能调用类型公共的属性或方法
function f(value:string|number){
    // console.log(value.length);//error:因为不知道传进来的是什么类型，因此报错
    console.log(value.toString());//访问这些公共方法是没问题的
    console.log(value.valueOf())
}

/类型断言/
//针对上面的情况，可以使用类型断言
function ff(value:string|number){
    if((<string>value).length){//可能会想不用断言直接判断value.length，但是这样是会报错的，就像上面一样
        console.log((<string>value).length);
    }else{
        console.log('number类型，不存在length属性');
    }
}

//类型断言的2种方式
//1:<类型>
function ff2(typeAssert:string|number){
    (<string>typeAssert).length;
}

//2:as
function ff3(typeAssert:string|number){
    (typeAssert as string).length;
}

//类型断言不能断言成联合类型外的类型
let typeAssert:string|number;
typeAssert as string;//OK
typeAssert as number;//OK
// typeAssert as boolean;//error