」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 釋放 TypeScript「as const」的力量:您需要了解的被低估的功能

釋放 TypeScript「as const」的力量:您需要了解的被低估的功能

發佈於2024-11-08
瀏覽:840

Unlocking the Power of TypeScript

在討論 TypeScript 中最被低估的功能時,經常被忽視的一個功能是 as const 斷言。此功能在各種場景中都非常有用,為開發人員提供了顯著的好處。

理解“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 的幫助下增強了清晰度。 ]

版本聲明 本文轉載於:https://dev.to/sharoztanveer/unlocking-the-power-of-typescripts-as-const-the-underrated-feature-you-need-to-know-25l7?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3