美文网首页
Typescript中的as const断言

Typescript中的as const断言

作者: 如果俞天阳会飞 | 来源:发表于2022-03-15 13:56 被阅读0次

    来源:https://blog.csdn.net/weixin_43263355/article/details/120943605

    概要

    typescript在开发过程中广泛被应用,typescript的断言特性更是重中之重,今天和大家来讨论一下as const断言。

    代码和讨论

    我们首先来看一段代码, 如下:

    let a:string = "aaa";
    const b = "aaa";
    

    以上代码除了const和let两个关键子本身的不同之外,就是a和b两个变量的实际类型是不同的。

    • 变量a实际为一种宽泛的字符串类型,只要是字符串,即可赋值给变量a
    • 变量b实际为一种具体的值类型,类型为“aaa”,不可被修改,因为其他任何字符串赋值给b,其类型都不会再是“aaa”类型,所以不能被修改。
      综上,const关键字实际是将宽泛的类型,例如字符串,数字等转化为具体的值类型。 而as const则是将此特性用于断言之中,方便类型转换操作。

    as const在数组中的应用

    基于上述认知,我们看下一段代码:

    let m = 100;
    let n="abc";
    let array = [m,n] ;
    let f = array[0];
    f = 2000;
    f="aaa";
    

    上述代码中,变量f可以被赋值为数字和字符串两种类型.原因就是变量m和n是两种类型,赋值给数组后,数组类型为宽泛的string | number类型。

    这是我们在代码中应该尽量避免的情况,可以用as const断言将宽泛的数据类型限定为具体的数值类型。

    let m = 100;
    let n="abc";
    let array = [m,n] as const;
    let f = array[0];
    f = 2000;
    
    • 通过as const限定后,数组类型变为readonly [number, string]

    • 准确来说,数组被限定成了一个元组,第一个数据的类型number,第二个是string

    • f变量被数组的一个变量赋值后,其类型也就被限定成了一个数值类型。

    • as const实现了从string | number到readonly [number, string]转化。

    as const在解构中应用

    我们先看如下代码:

    function asConst(){
        let a:string = "abc";
        let b = (firstname:string,lastname:string):string => firstname + lastname;
        return [a,b];
    }
    
    let [p,q] = asConst();
    console.log( q("Green","Tom"));
    

    上述代码会直接编译失败,原因是系统认为变量q的类型是string | ((firstname: string, lastname: string) => string),编译器并不能认定q是一个函数。

    我们也可以使用as const 将函数asConst的返回值由宽泛的string | ((firstname: string, lastname: string) => any)转化成具体的readonly [string,(firstname: string, lastname: string) => string],从而显示的表明q是函数类型的变量

    function asConst(){
        let a:string = "abc";
        let b = (firstname:string,lastname:string):string => firstname + lastname;
        return [a,b] as const;
    }
    
    let [p,q] = asConst();
    console.log( q("Green","Tom"));
    
    

    上面代码也可以使用as做显示的类型转换,将宽泛的数组类型转换成具体的元组类型,代码如下:

    function asConst(){
        let a:string = "abc";
        let b = (firstname:string,lastname:string):string => firstname + lastname;
        return [a,b] as [typeof a , typeof b];
    }
    
    let [p,q] = asConst();
    console.log( q("Green","Tom"));
    
    

    结论

    as const断言,可以将代码中宽泛的数据类型定义具体话,从而避免我们在开发过程中,因为定义过于宽泛,造成的各种数据处理的错误,通过精准的数据类型定义,更好的管理我们前端代码。

    相关文章

      网友评论

          本文标题:Typescript中的as const断言

          本文链接:https://www.haomeiwen.com/subject/ivhydrtx.html