概要
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("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
5 条评论
不错不错,我喜欢看 https://www.ea55.com/
陈化高:文章真不错http://wap.jst-gpmx.cn/news/30014.html
mipfjl63294YL-评论区互动热烈,大家讨论得很深入,有时候还能学到不少新观点。http://mobile.keroger.cn//
tjixqu83012CK-文章确实不错https://www.ctsr.cn//
jceyvo97216XY-企业建站!收录请看过来!http://www.myinfinitebanking.com//