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

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

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

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]刪除
最新教學 更多>
  • 將圖片浮動到底部右側並環繞文字的技巧
    將圖片浮動到底部右側並環繞文字的技巧
    在Web設計中圍繞在Web設計中,有時可以將圖像浮動到頁面右下角,從而使文本圍繞它纏繞。這可以在有效地展示圖像的同時創建一個吸引人的視覺效果。 css位置在右下角,使用css float and clear properties: img { 浮點:對; ...
    程式設計 發佈於2025-04-29
  • 如何從PHP會話數組中選擇性刪除特定變量?
    如何從PHP會話數組中選擇性刪除特定變量?
    在php session中刪除PHP會話陣列中的特定變量,可以存儲各種變量以供以後使用。但是,您可能會遇到只需要刪除特定變量的情況。以下是完成此任務的方法: 開始,您已經定義瞭如何將變量添加到會話中。讓我們專注於您打算使用Unset刪除變量的部分。不幸的是,使用Unsot($ _會話['n...
    程式設計 發佈於2025-04-29
  • 如何使用“ JSON”軟件包解析JSON陣列?
    如何使用“ JSON”軟件包解析JSON陣列?
    parsing JSON與JSON軟件包 QUALDALS:考慮以下go代碼:字符串 } func main(){ datajson:=`[“ 1”,“ 2”,“ 3”]`` arr:= jsontype {} 摘要:= = json.unmarshal([] byte(...
    程式設計 發佈於2025-04-29
  • Go語言垃圾回收如何處理切片內存?
    Go語言垃圾回收如何處理切片內存?
    Garbage Collection in Go Slices: A Detailed AnalysisIn Go, a slice is a dynamic array that references an underlying array.使用切片時,了解垃圾收集行為至關重要,以避免潛在的內存洩...
    程式設計 發佈於2025-04-29
  • 如何使用Python有效地以相反順序讀取大型文件?
    如何使用Python有效地以相反順序讀取大型文件?
    在python 中,如果您使用一個大文件,並且需要從最後一行讀取其內容,則在第一行到第一行,Python的內置功能可能不合適。這是解決此任務的有效解決方案:反向行讀取器生成器 == ord('\ n'): 緩衝區=緩衝區[:-1] ...
    程式設計 發佈於2025-04-29
  • C#中Int與Int32:選哪個整數類型?
    C#中Int與Int32:選哪個整數類型?
    C# 中 int 和 Int32 的使用 在 C# 中處理整數時,您可能會遇到兩個術語:int 和 Int32。這兩個術語代表相同的數據類型,都存儲 32 位整數。然而,一個常見的問題是:應該使用 int 還是 Int32? 雖然 int 和 Int32 的功能完全相同,但某些考慮因素可以指導您...
    程式設計 發佈於2025-04-29
  • 哪種在JavaScript中聲明多個變量的方法更可維護?
    哪種在JavaScript中聲明多個變量的方法更可維護?
    在JavaScript中聲明多個變量:探索兩個方法在JavaScript中,開發人員經常遇到需要聲明多個變量的需要。對此的兩種常見方法是:在單獨的行上聲明每個變量: 當涉及性能時,這兩種方法本質上都是等效的。但是,可維護性可能會有所不同。 第一個方法被認為更易於維護。每個聲明都是其自己的語句,使...
    程式設計 發佈於2025-04-29
  • 對象擬合:IE和Edge中的封面失敗,如何修復?
    對象擬合:IE和Edge中的封面失敗,如何修復?
    To resolve this issue, we employ a clever CSS solution that solves the problem:position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)...
    程式設計 發佈於2025-04-29
  • 如何使用node-mysql在單個查詢中執行多個SQL語句?
    如何使用node-mysql在單個查詢中執行多個SQL語句?
    Multi-Statement Query Support in Node-MySQLIn Node.js, the question arises when executing multiple SQL statements in a single query using the node-mys...
    程式設計 發佈於2025-04-29
  • MySQL中如何高效地根據兩個條件INSERT或UPDATE行?
    MySQL中如何高效地根據兩個條件INSERT或UPDATE行?
    在兩個條件下插入或更新或更新 solution:的答案在於mysql的插入中...在重複鍵更新語法上。如果不存在匹配行或更新現有行,則此功能強大的功能可以通過插入新行來進行有效的數據操作。如果違反了唯一的密鑰約束。 實現所需的行為,該表必須具有唯一的鍵定義(在這種情況下為'名稱'...
    程式設計 發佈於2025-04-29
  • 您如何在Laravel Blade模板中定義變量?
    您如何在Laravel Blade模板中定義變量?
    在Laravel Blade模板中使用Elegance 在blade模板中如何分配變量對於存儲以後使用的數據至關重要。在使用“ {{}}”分配變量的同時,它可能並不總是最優雅的解決方案。 幸運的是,Blade通過@php Directive提供了更優雅的方法: $ old_section =...
    程式設計 發佈於2025-04-29
  • Entity Framework 5更新記錄的最佳方法
    Entity Framework 5更新記錄的最佳方法
    Entity Framework 5記錄更新的最佳實踐 在Entity Framework 5中更新記錄,開發者常常面臨多種方法的選擇,每種方法都有其優缺點。本文將探討三種常用方法及其局限性,並最終給出最佳方案。 方法一:加載原始記錄並逐個更新屬性 此方法需要先加載原始記錄,然後手動更新每個修改...
    程式設計 發佈於2025-04-29
  • C#靜態變量如何工作及為何不能在方法內聲明
    C#靜態變量如何工作及為何不能在方法內聲明
    C#中的靜態變量 許多開發人員難以理解C#中靜態變量的功能。本文旨在闡明它們的用途和用法,同時解釋為什麼不能在方法內部聲明靜態變量。 什麼是靜態變量? 靜態變量是類級別的變量,在該類的所有實例之間共享。其值在從該類創建的所有對象之間共享。 何時使用靜態變量? 在需要跨類的多個實例維護值的情...
    程式設計 發佈於2025-04-29
  • 如何在JavaScript對像中動態設置鍵?
    如何在JavaScript對像中動態設置鍵?
    在嘗試為JavaScript對象創建動態鍵時,如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正確的方法採用方括號: jsobj ['key''i] ='example'1; 在JavaScript中,數組是一...
    程式設計 發佈於2025-04-29
  • IACA助力優化Intel CPU代碼性能分析
    IACA助力優化Intel CPU代碼性能分析
    被稱為英特爾體系結構代碼分析儀,IACA是用於評估針對Intel CPU的代碼調度的高級工具。它以三種模式運行: 吞吐量模式: iaca iaca衡量最大的吞吐量,假設它是嵌套循環的主體。 IACA traces the sequence of instructions as they prog...
    程式設計 發佈於2025-04-29

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

Copyright© 2022 湘ICP备2022001581号-3