建站
咨詢
售后
建站咨詢
新聞中心
1. 非空斷言運算符
感嘆號運算符稱為非空斷言運算符，添加此運算符會使編譯器忽略undefined和null類型。來看例子：
創(chuàng)新互聯(lián)是一家集網站建設,清豐企業(yè)網站建設,清豐品牌網站建設,網站定制,清豐網站建設報價,網絡營銷,網絡優(yōu)化,清豐網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。
const parseValue = (value: string) => {
// ...
};
const prepareValue = (value?: string) => {
// ...
parseValue(value);
};
對于 prepareValue 方法的 value 參數，TypeScript就會報出以下錯誤：
類型“string | undefined”的參數不能賦給類型“string”的參數。
不能將類型“undefined”分配給類型“string”。
類型“string | undefined”的參數不能賦給類型“string”的參數。不能將類型“undefined”分配給類型“string”。
因為我們希望 prepareValue 函數中的 value 是 undefined 或 string，但是我們將它傳遞給了 parseValue 函數，它的參數只能是 string。所以就報了這個錯誤。
但是，在某些情況下，我們可以確定 value 不會是 undefined，而這就是需要非空斷言運算符的情況：
const parseValue = (value: string) => {
// ...
};
const prepareValue = (value?: string) => {
// ...
parseValue(value!);
};
這樣就不會報錯了。但是，在使用它時應該非常小心，因為如果 value 的值是undefined ，它可能會導致意外的錯誤。
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);
由于搜索的內容不一定存在于列表中，所以 config 變量的類型是 Config | undefined，我們就可以使用可以使用費控斷言運算符告訴 TypeScript，config 應該是存在的，因此不必假設它是 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(null);
const handleClick = () => {
if(ref.current) {
console.log(ref.current.getBoundingClientRect());
}
};
return (
);
};
這里創(chuàng)建了一個簡單的組件，它可以訪問 class 為 App 的 DOM 節(jié)點。組件中有一個按鈕，當點擊該按鈕時，會顯示元素的大小以及其在視口中的位置。我們可以確定被訪問的元素是在點擊按鈕后掛載的，所以可以在 TypeScript 中添加非空斷言運算符表示這個元素是一定存在的：
const App = () => {
const handleClick = () => {
console.log(ref.current!.getBoundingClientRect());
};
};
當使用非空斷言運算符時，就表示告訴TypeScript，我比你更了解這個代碼邏輯，會為此負責，所以我們需要充分了解自己的代碼之后再確定是否要使用這個運算符。否則，如果由于某種原因斷言不正確，則會發(fā)生運行時錯誤。
標題名稱：TypeScript中的感嘆號，你知道它嗎？
轉載來源：http://www.dlmjj.cn/article/dphdgph.html
