在討論 TypeScript 中最被低估的功能時,經常被忽視的一個功能是 as const 斷言。此功能在各種場景中都非常有用,為開發人員提供了顯著的好處。
首先,讓我們先定義 as const 的作用。想像你有一個像這樣的對象:
const routes = { home: "/home", profile: "/profile", notifications: "/notification", };
如果您將滑鼠懸停在路線的屬性上,您會注意到它們被輸入為字串。例如,routes.home 被輸入為字串,而不是“/home”。這是因為 TypeScript 假設這些屬性可能會更改,因此它將它們推斷為可變字串。
現在,考慮一個應該只接受這些特定路由的函數。您可以像這樣定義類型:
function changeRoute(route: "home" | "profile" | "notifications") { // navigate to route }
這種方法有效,但重複且容易出錯。如果新增路由,則必須更新函數的類型定義,這並不理想。
這就是 as const 發揮作用的地方。透過使用 as const,您可以使物件不可變,並且 TypeScript 將推斷文字類型而不僅僅是字串。
const routes = { home: "/home", profile: "/profile", notifications: "/notification", } as const;
現在,routes.home 鍵入為“/home”,routes.notifications 鍵入為“/notifications”,依此類推。這種不變性確保這些屬性無法更改,並且 TypeScript 可以識別它們的特定值。
讓我們將 const 整合到函數中:
function changeRoute(route: typeof routes[keyof typeof routes]) { // navigate to route }
這裡,typeofroutes取得路由物件的類型,keyoftypeofroutes提取鍵,從而得到路由值的確切類型。這使得該函數能夠適應路由物件中的任何更改,而無需重複更新。
as const 的另一個強大方面是它如何實現類型提取。例如:
type Routes = (typeof routes)[keyof typeof routes];
這種類型的定義動態提取routes物件的值,使功能更易於維護並減少冗餘。
TypeScript 中的 as const 斷言是一個多功能且強大的功能,可以顯著提高類型安全性並減少程式碼中的冗餘。透過使物件不可變並啟用精確的類型推斷,它簡化了程式碼庫的維護和擴展。嘗試一下,您就會發現它如何增強您的 TypeScript 專案!
快樂編碼!
[披露:本文是協作成果,結合了我自己的想法並在 ChatGPT 的幫助下增強了清晰度。 ]
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3