TypeScript中的問號 ? 與感嘆號 ! 的含義

一、？（問號）操作符

　　在TypeScript里面，有4個地方會出現問號操作符，他們分別是：

1、三元運算符

// 當 isNumber(input) 為 True 是返回 ? : 之間的部分； isNumber(input) 為 False 時，返回 : ; 之間的部分
const a = isNumber(input) ? input : String(input);

2、參數

// 這里的 ？表示這個參數 field 是一個可選參數
function getUser(user: string, field?: string) { }

3、成員

// 這里的？表示這個name屬性有可能不存在
class A {
  name?: string
}

interface B {
  name?: 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');

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

二、！（感嘆號）操作符

　　在TypeScript里面有3個地方會出現感嘆號操作符，他們分別是：

1、一元運算符

// ! 就是將之后的結果取反，比如：
// 當 isNumber(input) 為 True 時返回 False； isNumber(input) 為 False 時返回True
const a = !isNumber(input);

2、成員

// 因為接口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');