TypeScript 中的感嘆號，你知道它嗎？
在 TypeScript 中感嘆號 ( ! ) 運算符可以使編譯器忽略一些錯誤，下面就來看看感嘆號運算符有哪些實際的用途的以及何時使用。
1. 非空斷言運算符
感嘆號運算符稱為非空斷言運算符，添加此運算符會使編譯器忽略undefined和null類型。來看例子：
const parseValue = (value: string) => {
// ...
};
const prepareValue = (value?: string) => {
// ...
parseValue(value);
};
對于 prepareValue 方法的 value 參數(shù)，TypeScript就會報出以下錯誤：
類型“string | undefined”的參數(shù)不能賦給類型“string”的參數(shù)。
不能將類型“undefined”分配給類型“string”。
類型“string | undefined”的參數(shù)不能賦給類型“string”的參數(shù)。不能將類型“undefined”分配給類型“string”。
因為我們希望 prepareValue 函數(shù)中的 value 是 undefined 或 string，但是我們將它傳遞給了 parseValue 函數(shù)，它的參數(shù)只能是 string。所以就報了這個錯誤。
但是，在某些情況下，我們可以確定 value 不會是 undefined，而這就是需要非空斷言運算符的情況：
const parseValue = (value: string) => {
// ...
};
const prepareValue = (value?: string) => {
// ...
parseValue(value!);
};
這樣就不會報錯了。但是，在使用它時應(yīng)該非常小心，因為如果 value 的值是undefined ，它可能會導(dǎo)致意外的錯誤。
2. 使用示例
既然知道了非空斷言運算符，下面就來看幾個真實的例子。
在列表中搜索是否存在某個項目：
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，我們就可以使用可以使用費控斷言運算符告訴 TypeScript，config 應(yīng)該是存在的，因此不必假設(shè)它是 undefined。
const getConfig = (id: number) => {
return configs.find((config) => config.id === id)!;
};
const config = getConfig(1);
這時，config 變量的類型就是 Config。這時再從 config 中獲取任何屬性時，就不需要再檢查它是否存在了。
再來看一個例子，React 中的 Refs 提供了一種訪問 DOM 節(jié)點或 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)建了一個簡單的組件，它可以訪問 class 為 App 的 DOM 節(jié)點。組件中有一個按鈕，當(dāng)點擊該按鈕時，會顯示元素的大小以及其在視口中的位置。我們可以確定被訪問的元素是在點擊按鈕后掛載的，所以可以在 TypeScript 中添加非空斷言運算符表示這個元素是一定存在的：
const App = () => {
const handleClick = () =>
console.log(ref.current!.getBoundingClientRect());
};
};
當(dāng)使用非空斷言運算符時，就表示告訴TypeScript，我比你更了解這個代碼邏輯，會為此負(fù)責(zé)，所以我們需要充分了解自己的代碼之后再確定是否要使用這個運算符。否則，如果由于某種原因斷言不正確，則會發(fā)生運行時錯誤。
