TS中的？和！的区别

一、什么是“?”操作符

在typescript里“?”操作符代表对象属性可选的意思，有四个地方会用到“?”操作符

1.三元运算符

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

2.可选参数

//当parmes存在值的时候返回parmes
///当parmes不存在值的时候返回underfind
function ac(parmes?:Number){
  return parmes
}

3.类、接口成员

// 在Ac、Ab中a有可能不存在
class Ac {
  a?:number
  b:string='1'
}

interface Ab {
  a?:number,
  b:string
}

4.链式调用的可选方法

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

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

// 以上代码等同以下代码, 感谢 @dingyanhe 的监督
const err = new Error();
return err.stack && err.stack.split('\n');

一、什么是“!”操作符

在TypeScript里面"!"是强制的意思，有3个地方会出现感叹号操作符，他们分别是

1.ts代码中取非的一元运算

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

2.成员

// 那么我们就可以通过在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');