Typescript中的as const断言

更新日期: 2022-12-28阅读: 769标签: Typescript

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


as const 也是类型断言的一种

这被称为const断言。const断言告诉编译器为表达式推断出它能推断出的最窄或最特定的类型。如果不使用它,编译器将使用其默认类型推断行为,这可能会导致更广泛或更一般的类型。

请注意,它被称为“断言”,而不是“强制转换”。术语“cast”在TypeScript中通常是要避免的;当人们说“cast”时,它们通常意味着某种可以在运行时观察到的效果,但是TypeScript的类型系统,包括类型断言和const断言,从发出的JavaScript中被完全删除。因此,在运行时,使用as const的程序和不使用as const的程序完全没有区别。

不过,在编译时,有一个明显的区别。让我们看看在上面的例子中省略as const会发生什么:

const args = [8, 5];
// const args: number[]
const angle = Math.atan2(...args); // error! Expected 2 arguments, but got 0 or more.
console.log(angle);

编译器看到const args = [8, 5];,并推断出number[]的类型。这是一个由0个或更多number类型的元素组成的可变数组。编译器不知道有多少或哪些元素。这样的推断通常是合理的;通常,数组内容意味着要以某种方式进行修改。如果有人想写args.push(17)或args[0]++,他们会很乐意使用number[]类型。

不幸的是,下一行Math.atan2(…args)导致了一个错误。Math.atan2()函数正好需要两个数值参数。但是编译器只知道args是一个数字数组。它完全忘记了有两个元素,因此编译器抱怨说,当它只需要两个参数时,您正在用“0或更多”参数调用Math.atan2()。

将其与as const的代码进行比较:

const args = [8, 5] as const;
// const args: readonly [8, 5]
const angle = Math.atan2(...args); // okay
console.log(angle);

现在编译器推断args属于readonly [8, 5]类型。。。一个readonly元组,其值正好是按此顺序排列的数字8和5。具体来说,args.length被编译器精确地称为2。

这就足够下一行使用Math.atan2()了。编译器知道Math.atan2(…args)与Math.atan2(8, 5)相同,这是一个有效的调用。


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


链接: https://fly63.com/article/detial/12265

用TypeScript弥补Elm和JavaScript之间的差距

近些日子,我使用了新语言编程,从JavaScript,切确地说是Elm,转成TypeScript。在本文中,我将继续深挖一些我非常喜欢的TypeScript特性。

Typescript 和 Javascript之间的区别

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?

Nerv_一款类 React 前端框架,基于虚拟 DOM 技术的 JavaScript(TypeScript) 库

Nerv_是一款由京东凹凸实验室打造的类 React 前端框架,基于虚拟 DOM 技术的 JavaScript(TypeScript) 库。它基于React标准,提供了与 React 16 一致的使用方式与 API。

TypeScript_TS系列之高级类型

交叉类型:将多个类型合并为一个类型、联合类型:表示取值可以为多种类型中的一种、混合类型:一个例子就是,一个对象可以同时做为函数和对象使用,并带有额外的属性、类型断言:可以用来手动指定一个值的类型

TypeScript 在 JavaScript 的基础上的改动

在做比较大的,多人合作的项目的时候,TypeScript会更加地适合,这得益于它的可读性,面向对象性以及易于重构的特点。但如果只是自己做小程序,不需要太多人参与的时候,JavaScript则会更加简单。

5分钟了解TypeScript

有两种方式安装TypeScript,如何创建第一个TypeScript文件,在TypeScript中,可以使用interface来描述一个对象有firstName和lastName两个属性,TypeScript支持JavaScript的新功能,其中很重要的一个功能就是基于类的面向对象编程

如何编写 Typescript 声明文件

使用TypeScript已经有了一段时间,这的确是一个好东西,虽说在使用的过程中也发现了一些bug,不过都是些小问题,所以整体体验还是很不错的。有关TypeScript声明类型声明相关的目前就总结了这些比较常用的

谷歌为何会选用TypeScript?

谷歌在很早之前就张开双臂拥抱 Web 应用程序,Gmail 已经发布 14 年了。当时,JavaScript 的世界是疯狂的。Gmail 工程师不得不为 IE 糟糕的垃圾回收算法捏一把汗,他们需要手动将字符串文字从 for 循环中提取出来,以避免 GC 停顿

为什么要学习Typescript 语言呢?Typescript 开发环境安装

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。

使用TypeScript两年后-值得吗?

差不多两年前,我在一个创业团队中开始了一个全新的项目。用到的全都是类似Microservices,docker,react,redux这些时髦的东西。我在前端技术方面积累了一些类似的经验

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!