建站
咨詢
售后
建站咨詢
新聞中心
你有沒有感覺 TypeScript中可能有一些被低估但卻非常有用的工具，你并沒有充分利用？的確有，今天我們要重點(diǎn)介紹一個(gè)：as const。它雖然沉默卻強(qiáng)大，而且非常有力，是一個(gè)被低估的功能，但它的力量卻強(qiáng)大無(wú)比。
理解 'as const'
以下是一個(gè)沒有 as const 的代碼片段：
const menu = {
home: '/home',
about: '/about',
contact: '/contact'
};這個(gè)TypeScript的世界里，這個(gè)變量可以隨心所欲地變化和改變。聽起來(lái)很靈活，，但是這里有個(gè)陷阱。
請(qǐng)考慮這個(gè) go to root 方法：
function goTo(route: 'home' | 'about' | 'contact') {
// some implementation
}注意到了嗎？如果你在 menu 對(duì)象中添加了另一條路由，你也需要更新函數(shù) goTo 。這就是冗余，導(dǎo)致同一類型有多個(gè)真實(shí)來(lái)源。
as const 可以為我們解決這個(gè)問題。
TypeScript的期望與現(xiàn)實(shí)
當(dāng)你在使用TypeScript時(shí)，有時(shí)你所期待的和實(shí)際發(fā)生的情況會(huì)痛苦地產(chǎn)生巨大的分歧。當(dāng)我們?cè)噲D從現(xiàn)有的類型中創(chuàng)建一個(gè)新的類型時(shí)，這種分歧變得非常明顯。
這里有個(gè)例子。假設(shè)你有一個(gè)對(duì)象，你期望TypeScript只考慮這個(gè)對(duì)象的屬性。但是，意外的是！TypeScript只把它當(dāng)作一個(gè)字符串來(lái)考慮。
let route: keyof typeof menu;
route = 'store'; // No error在這種情況下，TypeScript認(rèn)為 route 是一個(gè)可能會(huì)發(fā)生變化的字符串。但是，我們希望基于屬性的固定類型。我們的期望和現(xiàn)實(shí)并未對(duì)齊。
解決方案：'as const'
我們剛剛經(jīng)歷的那種痛苦的分歧，就是 as const 試圖解決的問題。通過將易變屬性改為不變屬性， as const 使我們的期望與現(xiàn)實(shí)保持一致。
const menu = {
home: '/home',
about: '/about',
contact: '/contact'
} as const;通過這個(gè)簡(jiǎn)單的改變，我們的對(duì)象屬性變成了只讀。我們看看它如何影響我們之前的問題：
let route: keyof typeof menu;
route = 'store'; // Error. Exactly what we wanted!通過使用 as const 使對(duì)象變?yōu)椴豢勺儯琓ypeScript 現(xiàn)在明白 route 應(yīng)該只允許提供的鍵?，F(xiàn)在，我們得到了我們想要的確切結(jié)果：當(dāng)我們?cè)噲D設(shè)置無(wú)效值時(shí)，會(huì)出現(xiàn)類型錯(cuò)誤。
與 object.freeze 的比較
你可能對(duì)JavaScript方法 Object.freeze() 有所了解。 Object.freeze() 和 as const 都可以使對(duì)象只讀，但它們之間存在著關(guān)鍵的差異。
我們快速了解一下他們的能力：
const menuFrozen = Object.freeze({
home: '/home',
about: '/about',
contact: '/contact'
});
const menuConst = {
home: '/home',
about: '/about',
contact: '/contact'
} as const;以及一些結(jié)果：
// 這不會(huì)改變?nèi)魏螙|西，home 仍然是'/home'
menuFrozen.home = '/newHome';
// 編譯時(shí)錯(cuò)誤
menuConst.home = '/newHome';通過 Object.freeze() ，我們擁有了一個(gè)運(yùn)行時(shí)概念，可以防止JavaScript對(duì)象的更改。然而， Object.freeze() 并不影響 TypeScript 的類型推斷。
另一方面，有了 as const ，TypeScript在編譯時(shí)將對(duì)象視為不可變的，使你的類型檢查更為嚴(yán)格，這有助于捕捉更多可能的錯(cuò)誤。
因此，雖然 as const 和 Object.freeze() 在表面上看起來(lái)可能相似，但它們服務(wù)于不同的目的。 as const 在類型檢查上更為強(qiáng)大，而 Object.freeze() 只在運(yùn)行時(shí)強(qiáng)制實(shí)施不變性。
一個(gè)配合 'as const' 的更清潔的 'go to root' 函數(shù)
我們使用 as const 重構(gòu) goTo 函數(shù)：
function goTo(route: keyof typeof menu) {
// some implementation
}就這樣，as const 使我們免于重復(fù)信息的愚蠢操作。我們可以從我們創(chuàng)建的對(duì)象中推斷出一個(gè)類型。這樣是不是更簡(jiǎn)潔了？
使用 'as const' 提取對(duì)象值
我們使用 as const 提取我對(duì)象值，顛覆TypeScript的規(guī)則，獲取我們需要的所有詳細(xì)信息，以編寫強(qiáng)大且無(wú)bug的代碼。這只需要一點(diǎn)類型魔法。
以下是一個(gè)示例：
type Routes = typeof menu[keyof typeof menu];
// Routes is now equal to '/home' | '/about' | '/contact'新聞名稱：AsConst：一個(gè)被低估的TypeScript特性
路徑分享：http://m.5511xx.com/article/djiidei.html
