TypeScript 中的感嘆號

1. 在 TypeScript 中使用 !斷言非 Null 的運算子
2. ! 的示例用法 TypeScript 中的運算子
3. TypeScript 中!操作符的有害影響

TypeScript 是一種強型別語言，支援建立使用者定義型別和本機型別。除了型別之外，還有 null 和 undefined，它們確定變數中是否有意或無意缺少值。

如果將 null 值分配給型別化變數，TypeScript 會報錯。這是感嘆號或砰砰聲或!運算子用於強制編譯器將值解釋為非空值。

本教程將重點介紹如何使用!運算子。

在 TypeScript 中使用 !斷言非 Null 的運算子

這 !運算子可以強制編譯器將值斷言為非 null 或非 undefined，儘管值型別可能為 null 或者是型別的聯合，其中 null 是其中一種型別。當使用者知道該值永遠不會為 null 時，這是由使用者完成的。

這 !運算子是在轉編譯為 JavaScript 時刪除的 TypeScript 語法。它可以被認為是類似的斷言運算子，如 as。

以下基本示例將顯示!可以使用。

function getValue() : number | undefined {
    return 3;
}   

var realValue : number | undefined;
realValue = getValue();
var value : number;
value = realValue!;
console.log(value);

輸出：

3

getValue() 函式可能是一個繁重的計算呼叫，但始終確保返回一個 number 型別。沒有!運算子，TypeScript 將顯示諸如 Type 'number | undefined' is not assignable to type 'number'。

!運算子強制編譯器將該值斷言為非空，並且以後不再丟擲錯誤。

! 的示例用法 TypeScript 中的運算子

! 的示例可以使用的運算子在程式碼段中給出。

interface Fruit {
    code : string;
    fruit : string;
}

const fruits : Fruit[] = [ 
    {
        code : "ORA", 
        fruit : "Orange"
    },
    {
        code : "APL", 
        fruit : "Apple"
    },
    {
        code : "GRA", 
        fruit : "Grapes"
    },
    {
        code : "LITC", 
        fruit : "Litchi"
    }
]

const findFruit = ( fruitToFilter : string ) => {
    return fruits.find( fruit => fruit.code === fruitToFilter);
}

const fruit : Fruit = findFruit("APL")!;
console.log(fruit);

輸出：

{
  "code": "APL",
  "fruit": "Apple"
} 

find 操作返回型別 string | undefined。編譯器被迫將其視為字串而不考慮 undefined，因為使用者確定返回的值不會是 undefined。

TypeScript 中!操作符的有害影響

使用者提供!運算子並強制編譯器將該值視為非 null。如果返回的值是 undefined 或 null，編譯器將不會捕獲任何錯誤，並且應用程式可能會面臨執行時錯誤。

所以 !應避免使用運算子，僅在保證返回的值不會為 null 或 undefined 時使用。