Typescript中的as、问号与感叹号详解

更新时间：2021年07月05日 17:02:44 作者：longzhoufeng

这篇文章主要介绍了Typescript中的as、问号与感叹号详解,本文分别讲述了这几个关键字的含义作用以及实例,通过文字和代码的描述,详细的表达.以下就是详细内容,需要的朋友可以参考下

1、as关键字表示断言

在Typescript中，表示断言有两种方式。一种是扩号表示法：

let someValue: any = "this is a string";
let strLength: number = (someValue).length;

另一种使用as关键字：

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

2、问号(?)用于属性定义

问号表示可选的属性，一般用于属性定义，如，用于接口时：

interface SquareConfig {
    color?: string;
    width?: number;
}
function createSquare(config: SquareConfig) {
    if (config.color) {
        console.log(config);
    }
}

可选属性的含义是：使用这个属性时，要么这个属性名不存在，要么必须符合属性的类型定义

比如上述createSquare函数编译时会报error错误：

error TS2551: Property 'clor' does not exist on type 'SquareConfig'.

如果修改createSquare，将config.color的值改为undefined，会怎样？

interface SquareConfig {
    color?: string;
    width?: number;
}
function createSquare(config: SquareConfig) {
    config.color = undefined;
    if (config.color) {
        console.log(config);
    }
}

这时并没有编译报错！明明config.color定义的是string类型呀？

即便是添加–strictNullChecks进行编译，也不会报错。可见，可选属性所定义的类型，并没有被typescript严格地对待，默认并不检查undefined。需要注意的是，将上述undefined改成null时，普通编译也不报错，–strictNullChecks编译会报如下错误：

error TS2322: Type 'null' is not assignable to type 'string | undefined'

从这句报错中，我们可以得出这样的结论：可选属性等价于一个union类型，union了undefined；不加–strictNullChecks编译时，null可以赋值给undfined类型。也就是说，SquareConfig的定义与下面的代码等价：

interface SquareConfig {
    color: string|undefined;
    width: number|undefined;
}

下面比较一下可选属性与正常属性。再次修改createSquare，将color属性修改为正常属性。

interface SquareConfig {
    color: string;
    width?: number;
}
function createSquare(config: SquareConfig) {
    config.color = undefined;
    if (config.color) {
        console.log(config);
    }
}

以–strictNullChecks编译，报错了:

error TS2322: Type ‘undefined' is not assignable to type ‘string'

这个比较也验证了上述的结论。

问号(?)用于属性读取

问号用于属性读取，主要有两个场景：一是读取数组元素（如下面的node[i]），二是读取不确定的类型如any，union，可选类型（如node[i].data）等。如下例，保存为index.ts：

interface VNodeData {
    class?: string;
}
interface VNode {
    sel?: string;
    data?: VNodeData;
}
function test(node: VNode[]) {
    let i = 0;
    var b = node[i].data.class;
    if(b !== undefined) {
        console.log(1);
    }
}

用tsc --strictNullChecks index.ts，报错：

error TS2532: Object is possibly 'undefined'

下面将一一展示这一行代码var b = node[i].data.class;修改改后的效果。

1、修改为var b = node[i]?.data.class;，然后编译。报错：

Object is possibly 'undefined'

2、修改为var b = node[i]?.data?.class;，然后编译。编译通过，查看编译后的对应代码为：

function test(node) {
    var _a, _b;
    var i = 0;
    var b = (_b = (_a = node[i]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b["class"];
    // var b = node[i].data.class;//报错
    if (b !== undefined) {
        console.log(1);
    }
}

var b = node[i]?表示，如果node[i]的值为null或者undefined，则b等于undefined，否则b=node[i]。

3、修改为var b = (node[i] as VNode).data?.class;，然后编译。编译通过，查看编译后的对应代码为：

function test(node) {
    var _a;
    var i = 0;
    var b = (_a = node[i].data) === null || _a === void 0 ? void 0 : _a["class"];
    // var b = node[i]?.data?.class;
    // var b = node[i].data.class;//报错
    if (b !== undefined) {
        console.log(1);
    }
}

此时，使用node[i]时，Typescript编译器将不再对其判断是否为null和undefined。即：var b = node[i] as VNode直接会被编成var b = node[i]。

4、修改为var b = node[i]!.data?.class，然后编译。编译通过，查看编译后的对应代码为：

function test(node) {
    var _a;
    var i = 0;
    var b = (_a = node[i].data) === null || _a === void 0 ? void 0 : _a["class"];
    // var b = (node[i] as VNode).data?.class
    // var b = node[i]?.data?.class;
    // var b = node[i].data.class;//报错
    if (b !== undefined) {
        console.log(1);
    }
}

可见，3和4的编译后代码完全一样，!的作用此时与as是等价的。然而，!只是用来判断null和undefined；as则可用于变更（缩小或者放大都可以）类型检测范围，仅当as后面跟的类型是一个非空类型时，两者才等价。如下例中，不能将as用法改为!。

interface Cat {
    action: string;
}
interface Dog {
    action: string;
}
type Animal = Cat | Dog;
let action:Animal = {} as Cat;

结论

1、as和!用于属性的读取，都可以缩小类型检查范围，都做判空用途时是等价的。只是!具体用于告知编译器此值不可能为空值（null和undefined），而as不限于此。

2、?可用于属性的定义和读取，读取时告诉编译器此值可能为空值（null和undefined），需要做判断。

到此这篇关于Typescript中的as、问号与感叹号详解的文章就介绍到这了,更多相关Typescript中as、问号与感叹号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

前端面试知识点目录一览
本文是小编给大家搜集整理的有关前端面试知识点，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-04-04
javascript学习笔记_浅谈基础语法,类型,变量
下面小编就为大家带来一篇javascript学习笔记_浅谈基础语法,类型,变量。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
一篇文章带你了解JavaScript的包装类型
这篇文章主要为大家详细介绍了JavaScript的包装类型，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
javascript replace()第二个参数为函数时的参数用法
replace()函数具有替换功能，它可以具有两个参数，第一个参数可以是要被替换的字符串或者匹配要被替换字符串的正则表达式，第二个参数可以是替换文本或者一个函数，下面看一下关于replace()函数的几个代码实例
2016-12-12
JavaScript入门教程(4) js浏览器对象
navigator 浏览器对象，包含了正在使用的 Navigator 的版本信息。反映了当前使用的浏览器的资料。JavaScript 客户端运行时刻引擎自动创建 navigator 对象。
2009-01-01
详解JavaScript的变量
这篇文章主要介绍了JavaScript变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
每日十条JavaScript经验技巧(一)
本文是每日十条JavaScript经验技巧系列文章的第一篇，给大家汇总介绍一些在JavaScript使用过程中的注意事项，非常的简单，都是个人在平时项目中的一点小小的总结，希望对大家能够有所帮助
2016-06-06
简单总结JavaScript中的String字符串类型
就像其他语言那样,js中的字符串类型可以表示一串字符,由双引号包住,这里简单总结JavaScript中的String字符串类型的一些基础知识
2016-05-05
JS的get和set使用示例
巧用get和set，能够直接操作对象属性实现读写，可以极大的提高编程效率，下面有个不错的示例，大家可以参考下
2014-02-02
详解JavaScript中的表单验证
这篇文章主要介绍了JavaScript中的表单验证,是JS在前端和服务器端通信部分相关的重要知识,需要的朋友可以参考下
2015-06-06