TypeScript中的 ! 和 ? 操作符

更新時間：2025年02月16日 11:53:59 作者：代碼里的小貓咪

在 TypeScript 中,!?和???是兩個非常重要且常用的操作符,分別用于非空斷言和可選鏈操作,下面就來具體介紹一下如何使用,具有一定的參考價值,感興趣的可以了解一下

1. 非空斷言操作符 !

1.1 含義

非空斷言操作符 !（Non-null assertion operator）用來告訴 TypeScript 編譯器，某個值在當前情況下絕對不是 null 或 undefined，即使 TypeScript 的類型系統(tǒng)無法推斷這一點。這會繞過 TypeScript 的類型檢查，直接斷言該值不是 null 或 undefined。

??

let user = {
  name: 'Alice',
  age: 25
};

// TypeScript 會認為 user.address 可能是 undefined，因為它沒有在 user 對象中定義

// 使用非空斷言，告訴 TypeScript 我確信 user.address 存在，可以強制將其視為有效的對象。
console.log(user.address!.length);

這里，user.address! 告訴 TS user.address 一定有值，因此可以安全地調用 .length。如果 user.address 真的為 undefined，就會拋出運行時錯誤。

const singleRef = ref();

const open = () => {
  singleRef.value!.openDialog();
};

這里 ! 告訴 TS，盡管 singleRef.value 可能是 null 或 undefined，但確定在調用 openDialog 時一定是有值的，因此跳過類型檢查。

1.2 適用場景

- 當確信某個值不會是 null 或 undefined，并且 TypeScript 編譯器無法推斷出這一點時，可以使用 ! 告知 TS 該值運行時肯定存在。

- 在某些情況下，可能是外部庫的 API 或代碼中的某些邏輯導致 TS 無法推斷出某個值的類型，可以使用 ! 強制該值不是 null 或 undefined。

1.3 注意事項

1）過度使用 ! 會讓 TypeScript 類型系統(tǒng)失去意義，這可能會在運行時導致錯誤。因為強行告訴 TypeScript 這個值不會是 null 或 undefined，但實際上可能是，這會導致潛在的運行時錯誤。

2）謹慎使用，只有在非常確定值不會為 null 或 undefined 的情況下使用。

2. 可選鏈操作符 ?

2.1 含義

可選鏈操作符 ?（Optional chaining operator）允許我們安全地訪問一個對象的屬性或方法，而不必擔心中間某一環(huán)節(jié)為 null 或 undefined。如果對象的某個部分為 null 或 undefined，則表達式會短路并返回 undefined，而不會拋出錯誤。

??

const user = {
  name: 'Alice',
  address: {
    city: 'New York'
  }
};

// 使用可選鏈操作符安全訪問
console.log(user.address?.city); // "New York"

// 連續(xù)鏈式調用
const length = user.address?.street?.length; // undefined，而不是拋出錯誤
console.log(length); // undefined

這里，user.address?.city 可以安全地訪問 address 屬性，即使 user.address 為 undefined，也不會拋出錯誤，而是返回 undefined。

const singleRef = ref();

const open = () => {
  singleRef.value?.openDialog();
};

這里 ? 表示如果 singleRef.value 是 null 或 undefined，則不調用 openDialog 方法，而是返回 undefined，避免拋出錯誤。

2.2 適用場景

- 當訪問對象的深層嵌套屬性時，不確定某個中間屬性是否存在，使用 ? 可以防止因訪問 null 或 undefined 的屬性而導致的錯誤。

- 當調用一個方法或訪問一個屬性時，可能該對象本身或某些屬性可能為 null 或 undefined，可選鏈操作符幫助我們避免報錯。

2.3 注意事項

1）可選鏈操作符可以防止錯誤，但它不會提供默認值，如果需要返回一個默認值，可以結合 ??（空值合并操作符）使用。

2）如果屬性鏈中的任何一部分為 null 或 undefined，則后續(xù)的屬性訪問停止，結果為 undefined，而不會拋出異常。如果該屬性存在，繼續(xù)訪問鏈式屬性。這能避免代碼中因訪問未定義屬性而導致的運行時錯誤，尤其是在處理不確定或動態(tài)結構的數(shù)據(jù)時非常有用。