建站
咨詢
售后
建站咨詢
新聞中心
1. 非空斷言運(yùn)算符
感嘆號(hào)運(yùn)算符稱為非空斷言運(yùn)算符，添加此運(yùn)算符會(huì)使編譯器忽略u(píng)ndefined和null類型。來看例子：
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),清豐企業(yè)網(wǎng)站建設(shè),清豐品牌網(wǎng)站建設(shè),網(wǎng)站定制,清豐網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,清豐網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
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(null);
const handleClick = () => {
if(ref.current) {
console.log(ref.current.getBoundingClientRect());
}
};
return (
);
};
這里創(chuàng)建了一個(gè)簡單的組件，它可以訪問 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ò)誤。
當(dāng)前標(biāo)題：TypeScript中的感嘆號(hào)，你知道它嗎？
轉(zhuǎn)載源于：http://www.5511xx.com/article/dphdgph.html
