快捷導(dǎo)航

TypeScript中的 ! 和 ? 操作符

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

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

1. 非空斷言操作符 !

1.1 含義

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

??

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

// TypeScript 會(huì)認(rèn)為 user.address 可能是 undefined，因?yàn)樗鼪]有在 user 對(duì)象中定義

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

這里，user.address! 告訴 TS user.address 一定有值，因此可以安全地調(diào)用 .length。如果 user.address 真的為 undefined，就會(huì)拋出運(yùn)行時(shí)錯(cuò)誤。

const singleRef = ref();

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

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

1.2 適用場(chǎng)景

- 當(dāng)確信某個(gè)值不會(huì)是 null 或 undefined，并且 TypeScript 編譯器無法推斷出這一點(diǎn)時(shí)，可以使用 ! 告知 TS 該值運(yùn)行時(shí)肯定存在。

- 在某些情況下，可能是外部庫(kù)的 API 或代碼中的某些邏輯導(dǎo)致 TS 無法推斷出某個(gè)值的類型，可以使用 ! 強(qiáng)制該值不是 null 或 undefined。

1.3 注意事項(xiàng)

1）過度使用 ! 會(huì)讓 TypeScript 類型系統(tǒng)失去意義，這可能會(huì)在運(yùn)行時(shí)導(dǎo)致錯(cuò)誤。因?yàn)閺?qiáng)行告訴 TypeScript 這個(gè)值不會(huì)是 null 或 undefined，但實(shí)際上可能是，這會(huì)導(dǎo)致潛在的運(yùn)行時(shí)錯(cuò)誤。

2）謹(jǐn)慎使用，只有在非常確定值不會(huì)為 null 或 undefined 的情況下使用。

2. 可選鏈操作符 ?

2.1 含義

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

??

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

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

// 連續(xù)鏈?zhǔn)秸{(diào)用
const length = user.address?.street?.length; // undefined，而不是拋出錯(cuò)誤
console.log(length); // undefined

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

const singleRef = ref();

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

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

2.2 適用場(chǎng)景

- 當(dāng)訪問對(duì)象的深層嵌套屬性時(shí)，不確定某個(gè)中間屬性是否存在，使用 ? 可以防止因訪問 null 或 undefined 的屬性而導(dǎo)致的錯(cuò)誤。

- 當(dāng)調(diào)用一個(gè)方法或訪問一個(gè)屬性時(shí)，可能該對(duì)象本身或某些屬性可能為 null 或 undefined，可選鏈操作符幫助我們避免報(bào)錯(cuò)。

2.3 注意事項(xiàng)

1）可選鏈操作符可以防止錯(cuò)誤，但它不會(huì)提供默認(rèn)值，如果需要返回一個(gè)默認(rèn)值，可以結(jié)合 ??（空值合并操作符）使用。

2）如果屬性鏈中的任何一部分為 null 或 undefined，則后續(xù)的屬性訪問停止，結(jié)果為 undefined，而不會(huì)拋出異常。如果該屬性存在，繼續(xù)訪問鏈?zhǔn)綄傩浴＿@能避免代碼中因訪問未定義屬性而導(dǎo)致的運(yùn)行時(shí)錯(cuò)誤，尤其是在處理不確定或動(dòng)態(tài)結(jié)構(gòu)的數(shù)據(jù)時(shí)非常有用。