TypeScript中变量调用时后缀感叹号和问号的区别

typescript编译时，当我们开启严格模式时，下面的代码就会报错：

function doSomething(x: string | null) {
    console.log("Hello, " + x.toUpperCase());
}

编译错误：

hello.ts:56:29 - error TS2531: Object is possibly 'null'.

56     console.log("Hello, " + x.toUpperCase());

当我们在调用变量x的方法时，增加后缀!和？时，这个编译错误都会消失：

x!.toUpperCase() 
x?.toUpperCase()

那这两者到底有什么区别呢？

后缀是?

function doSomething(x: string | null) {
    console.log("Hello, " + x?.toUpperCase());
}

doSomething(null);

输出是：

Hello, undefined

后缀是!

function doSomething(x: string | null) {
    console.log("Hello, " + x!.toUpperCase());
}

doSomething(null);

输出是：

Uncaught TypeError TypeError: Cannot read properties of null (reading 'toUpperCase')

结论：

• 后缀是!，只是告诉typescript编译器对于null和undefined不做显示的检查，生成的js文件中还是x.toUpperCase()，如果此时x为null，那么就会出现运行时异常
• 后缀是?，代表是一个空判断，只有非空是，才会执行x.toUpperCase()，生成的js文件中是增加了null或者undefined判断的，生成的js是(x === null || x === void 0 ? void 0 : x.toUpperCase())