在 TypeScript 中，當你開啟了嚴格的空值檢查（strictNullChecks）后，變量如果可能是 null 或 undefined，就必須在使用前進行顯式的判斷。為了在某些場景下簡化代碼，TypeScript 提供了非空斷言操作符（! 后綴符號），用來告訴編譯器：“我確定這個值不是 null 或 undefined。”

這在你非常確信某個值在使用時一定有效、不會為空時特別有用。

一、語法說明

const nonNullValue: Type = value!;

• nonNullValue：你希望保存非空值的變量。
• Type：你期望該變量的類型。
• value：你正在斷言不會為 null 或 undefined 的原始值。
• !：告訴 TypeScript 編譯器，value 一定不是空值。

二、使用場景示例

示例 1：參數可能為 null 的函數

我們定義了一個接收 name 參數的函數 greetUser，該參數的類型為 string | null。為了確保后續使用時不會因 null 而報錯，我們使用非空斷言操作符 !，告訴編譯器這個值一定不為空。

function greetUser(name: string | null) {// 使用非空斷言操作符，確保 name 非空const formattedName: string = name!;console.log(`Hello, ${formattedName || 'Felixlu'}!`);
}greetUser("JackWang"); // 輸出: Hello, JackWang!
greetUser(null);     // 輸出: Hello, Felixlu!

? 注意：雖然使用了 !，但 null 依然傳入了，此時 formattedName 是 null，所以回退到 'Felixlu'。這說明 ! 只影響編譯階段的類型檢查，不會改變運行時行為。

示例 2：訪問可選屬性時使用非空斷言

下面我們定義了一個 User 類型，它的 email 屬性是可選的（email?: string），也就是說它可能為 undefined。在訪問 email 時，TypeScript 會提示可能為空，但如果我們確信它一定存在，可以使用 ! 進行斷言：

type User = {name: string;email?: string;
};const user: User = {name: "Felixlu",// 未提供 email
};// name 是必填屬性，無需斷言
const userName: string = user.name;// 使用非空斷言訪問 email
const userEmail: string = user.email!;console.log(`User Name: ${userName}`);
console.log(`User Email: ${userEmail}`);

輸出：

User Name: Felixlu
User Email: undefined

?? 注意：user.email! 斷言只告訴編譯器不要報錯，但不會阻止你訪問一個實際為 undefined 的值。因此運行時仍然會輸出 undefined，你需要自己保證其存在性。

三、使用非空斷言的最佳實踐

雖然 ! 操作符非常方便，但也有一定風險。以下是一些建議：

? 推薦使用的場景	? 應避免的場景
你 100% 確信某個值已經初始化或賦值完畢	值的存在依賴異步邏輯或外部條件
在模板渲染、DOM 操作中確保某元素已掛載	在尚未完成數據加載前使用非空斷言

示例：推薦使用場景

const input = document.querySelector('input#username')!;
// 此處 input 一定存在（你確信頁面結構），所以使用 ! 是合理的
input.value = "Felixlu";

四、總結

TypeScript 的非空斷言操作符 ! 是一種在你確信值不會為 null 或 undefined 時，跳過編譯期空值檢查的強大工具。它簡化了代碼邏輯，但也帶來了隱藏的運行時風險。

使用時請確保斷言背后的前提條件是可靠的，否則可能導致難以發現的 bug。