概要

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;
  1. 通过 as const 限定后，数组类型变为 readonly [number, string]
  2. 准确来说，数组被限定成了一个元组，第一个数据的类型 number ，第二个是 string
  3. f 变量被数组的一个变量赋值后，其类型也就被限定成了一个数值类型。
  4. 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("kobe", "Brant"));

上述代码会直接编译失败，原因是系统认为变量 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("kobe", "Brant"));

上面代码也可以使用 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("kobe", "Brant"));

结论

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

————————————————
版权声明：本文为CSDN博主「懒人Ethan」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43263355/article/details/120943605

最后修改：2022 年 06 月 02 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏或留下你的评论~