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;
问号表⽰可选的属性，⼀般⽤于属性定义，如，⽤于接⼝时：
interface SquareConfig {
color?: string;
width?: number;
}
function createSquare(config: SquareConfig) {
if (lor) {
console.log(config);
}
}
可选属性的含义是：使⽤这个属性时，要么这个属性名不存在，要么必须符合属性的类型定义 ⽐如上述createSquare函数编译时会报error错误： error TS2551: Property 'clor' does not exist on type 'SquareConfig'.
如果修改createSquare，将lor的值改为undefined，会怎样？
interface SquareConfig {
color?: string;
width?: number;
}
function createSquare(config: SquareConfig) {
if (lor) {
console.log(config);
}
}
这时并没有编译报错！明明lor定义的是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) {
if (lor) {
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、问号与感叹号内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
