Jira项目笔记23：TypeScript中as const的深入应用

概要

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";
1.
2.
3.
4.
5.
6.

上述代码中，变量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;
1.
2.
3.
4.
5.

    通过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"));
1.
2.
3.
4.
5.
6.

上述代码会直接编译失败，原因是系统认为变量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"));
1.
2.
3.
4.
5.
6.

上面代码也可以使用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"));
1.
2.
3.
4.
5.
6.