TypeScript 中的特殊符号：！，？

参考： ts 中一些符号含义

TypeScript 中的特殊符号：！，？

1、 ？ 操作符

在 TypeScript 里面，有4个地方会出现问号操作符，他们分别是：

（1）三元运算符

// 当 isNumber(input) 为 True 是返回 ? : 之间的部分； isNumber(input) 为 False 时
// 返回 : ; 之间的部分
const a = isNumber(input) ? input : String(input);

核心功能：如果遇到 null 或 undefined 就可以立即停止某些表达式的运行， 表示属性或参数为可选项。

（2）可选参数

// 这里的 ？表示这个参数 field 是一个可选参数
function getUser(user: string, field?: string) {
}

（3）成员

// 这里的？表示这个 name 属性有可能不存在
class A {
  name?: string
}

interface B {
  name?: string
}

（4）安全链式调用

const a = fetch(...) || {}		// 假设 a 是从后端拿到的一个对象类型数据
const unsafeData = a.b.c		// 这样写时不安全的，无法确保 b 是否有值，如果为空则 b.c 会进行报错
const safeData = a?.b?.c		// 实际上就是相当于 const safeData = a && a.b && a.b.c

// 这里 Error对象定义的stack是可选参数，如果这样写的话编译器会提示
// 出错 TS2532: Object is possibly 'undefined'.
return new Error().stack.split('\n');

// 我们可以添加?操作符，当stack属性存在时，调用 stack.split。若stack不存在，则返回空
return new Error().stack?.split('\n');

// 以上代码等同以下代码
const err = new Error();
return err.stack && err.stack.split('\n');

2、！ 操作符

在 TypeScript 里面有3个地方会出现感叹号操作符，他们分别是：

（1）一元运算符（用在变量前表示取反）

// ! 就是将之后的结果取反，比如：
// 当 isNumber(input) 为 True 时返回 False； isNumber(input) 为 False 时返回True
const a = !isNumber(input);

（2）成员

变量后使用！：表示类型推断排除 null、undefined

!非空断言符号：忽略 null 和 undefined 类型

（用在赋值的内容后时，使 null 和 undefined 类型可以赋值给其他类型并通过编译，表示该变量值可空）

let y:number

y = null		// 无法通过编译
y = undefined	// 无法通过编译

y = null!
y = undefined!

// 由于 x 是可选的，因此 parma.x 的类型为 number | undefined，无法传递给 number 类型的 y，因此需要用x!
interface IDemo {
    x?: number
}

let y:number

const demo = (parma: IDemo) => {
    y = parma.x!
    return y
}

// 因为接口B里面name被定义为可空的值，但是实际情况是不为空的，那么我们就可以
// 通过在class里面使用！，重新强调了name这个不为空值
class A implemented B {
  name!: string
}

interface B {
  name?: string
}

（3）强制链式调用 （非空断言操作符）

// 这里 Error对象定义的stack是可选参数，如果这样写的话编译器会提示
// 出错 TS2532: Object is possibly 'undefined'.
new Error().stack.split('\n');

// 我们确信这个字段100%出现，那么就可以添加！，强调这个字段一定存在
new Error().stack!.split('\n');

参考：TS中的问号 ? 与感叹号 ! 是什么意思

TS中的!和?用法