在 TypeScript 中感嘆號(hào) ( ! ) 運(yùn)算符可以使編譯器忽略一些錯(cuò)誤，下面就來看看感嘆號(hào)運(yùn)算符有哪些實(shí)際的用途的以及何時(shí)使用。

1. 非空斷言運(yùn)算符

感嘆號(hào)運(yùn)算符稱為非空斷言運(yùn)算符，添加此運(yùn)算符會(huì)使編譯器忽略u(píng)ndefined和null類型。來看例子：

const parseValue = (value: string) => {
    // ...
};

const prepareValue = (value?: string) => {
    // ...
    parseValue(value);
};

對(duì)于 prepareValue 方法的 value 參數(shù)，TypeScript就會(huì)報(bào)出以下錯(cuò)誤：

類型“string | undefined”的參數(shù)不能賦給類型“string”的參數(shù)。
不能將類型“undefined”分配給類型“string”。

類型“string | undefined”的參數(shù)不能賦給類型“string”的參數(shù)。不能將類型“undefined”分配給類型“string”。

因?yàn)槲覀兿Ｍ?prepareValue 函數(shù)中的 value 是 undefined 或 string，但是我們將它傳遞給了 parseValue 函數(shù)，它的參數(shù)只能是 string。所以就報(bào)了這個(gè)錯(cuò)誤。

但是，在某些情況下，我們可以確定 value 不會(huì)是 undefined，而這就是需要非空斷言運(yùn)算符的情況：

const parseValue = (value: string) => {
  // ...
};

const prepareValue = (value?: string) => {
  // ...
  parseValue(value!);
};

這樣就不會(huì)報(bào)錯(cuò)了。但是，在使用它時(shí)應(yīng)該非常小心，因?yàn)槿绻?value 的值是undefined ，它可能會(huì)導(dǎo)致意外的錯(cuò)誤。

2. 使用示例

既然知道了非空斷言運(yùn)算符，下面就來看幾個(gè)真實(shí)的例子。

在列表中搜索是否存在某個(gè)項(xiàng)目：

interface Config {
  id: number;
  path: string;
}

const configs: Config[] = [
  {
    id: 1,
    path: "path/to/config/1",
  },
  {
    id: 2,
    path: "path/to/config/2",
  },
];

const getConfig = (id: number) => {
  return configs.find((config) => config.id === id);
};

const config = getConfig(1);

由于搜索的內(nèi)容不一定存在于列表中，所以 config 變量的類型是 Config | undefined，我們就可以使用可以使用費(fèi)控?cái)嘌赃\(yùn)算符告訴 TypeScript，config 應(yīng)該是存在的，因此不必假設(shè)它是 undefined。

const getConfig = (id: number) => {
  return configs.find((config) => config.id === id)!;
};

const config = getConfig(1);

這時(shí)，config 變量的類型就是 Config。這時(shí)再從 config 中獲取任何屬性時(shí)，就不需要再檢查它是否存在了。

再來看一個(gè)例子，React 中的 Refs 提供了一種訪問 DOM 節(jié)點(diǎn)或 React 元素的方法：

const App = () => {
  const ref = useRef<HTMLDivElement>(null);

  const handleClick = () => {
    if(ref.current) {
      console.log(ref.current.getBoundingClientRect());
    }
  };

  return (
    <div className="App" ref={ref}>
      <button onClick={handleClick}>Click</button>
    </div>
  );
};

這里創(chuàng)建了一個(gè)簡(jiǎn)單的組件，它可以訪問 class 為 App 的 DOM 節(jié)點(diǎn)。組件中有一個(gè)按鈕，當(dāng)點(diǎn)擊該按鈕時(shí)，會(huì)顯示元素的大小以及其在視口中的位置。我們可以確定被訪問的元素是在點(diǎn)擊按鈕后掛載的，所以可以在 TypeScript 中添加非空斷言運(yùn)算符表示這個(gè)元素是一定存在的：

const App = () => {
  const handleClick = () => {
    console.log(ref.current!.getBoundingClientRect());
  };
};

當(dāng)使用非空斷言運(yùn)算符時(shí)，就表示告訴TypeScript，我比你更了解這個(gè)代碼邏輯，會(huì)為此負(fù)責(zé)，所以我們需要充分了解自己的代碼之后再確定是否要使用這個(gè)運(yùn)算符。否則，如果由于某種原因斷言不正確，則會(huì)發(fā)生運(yùn)行時(shí)錯(cuò)誤。