」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 簡化 TypeScript 中的聯合類型和陣列

簡化 TypeScript 中的聯合類型和陣列

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

Simplifying Union Types and Arrays in TypeScript

使用 TypeScript 時,您可能會發現自己需要定義一個聯合型別和一個包含該型別所有可能值的陣列。常見的方法是這樣寫:

type Taste = 'しょうゆ' | 'みそ' | 'とんこつ';
const tastes = ['しょうゆ', 'みそ', 'とんこつ'];

乍一看,這似乎不錯。然而,這裡有一個隱藏的問題:每次想要更改或添加選項時,都需要更新 Taste 聯合類型和味道數組。這種重複的工作可能會導致錯誤並使維護程式碼變得更加乏味。

幸運的是,有一種方法可以透過減少冗餘來簡化這個過程。透過在 TypeScript 中使用 as const 斷言和 typeof,您可以將聯合類型和陣列的定義合併到一處。以下是重構上述程式碼的方法:

const tastes = ['しょうゆ', 'みそ', 'とんこつ'] as const;
type Taste = (typeof tastes)[number];

這種方法有幾個好處:

  1. 單一事實來源

    您只需在味道數組中定義一次值列表。口味類型會自動從此數組派生,因此如果您需要更新列表,只需在一個地方執行即可。

  2. 模式安全:

    透過使用 as const,TypeScript 將品味數組視為具有文字類型的元組,而不僅僅是字串數組。這可確保口味類型保持準確並與口味中的數值保持一致。

  3. 更好的維護

    由於 Taste 類型是從陣列產生的,因此不存在類型與實際值不符的風險。這減少了出現錯誤的可能性並使程式碼更易於維護。

範例用例

現在,每當您在程式碼中使用 Taste 類型時,它保證與味道數組中的值相符:

function describeTaste(taste: Taste): string {
  switch (taste) {
    case 'しょうゆ':
      return 'Savory soy sauce flavor.';
    case 'みそ':
      return 'Rich miso flavor.';
    case 'とんこつ':
      return 'Creamy pork broth flavor.';
    default:
      return 'Unknown taste';
  }
}

const allTastes: Taste[] = tastes; // Safe, because they match the type!

這種模式不僅提高了程式碼的可讀性,而且還確保它不易出錯,特別是在處理需要保持同步的多個值時。

透過採用此策略,您可以讓 TypeScript 程式碼更具可維護性和可擴充性。當您處理大量值或您的程式碼庫隨著時間的推移而增長時,這特別有用。

版本聲明 本文轉載於:https://dev.to/mktoho12/simplifying-union-types-and-arrays-in-typescript-i60?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何檢查對像是否具有Python中的特定屬性?
    如何檢查對像是否具有Python中的特定屬性?
    方法來確定對象屬性存在尋求一種方法來驗證對像中特定屬性的存在。考慮以下示例,其中嘗試訪問不確定屬性會引起錯誤: >>> a = someClass() >>> A.property Trackback(最近的最新電話): 文件“ ”,第1行, AttributeError: SomeClass...
    程式設計 發佈於2025-04-16
  • 點擊顯示圖片的技巧及方法
    點擊顯示圖片的技巧及方法
    網絡上的大多數圖像都是多餘的。如果我可能有點混蛋,那麼其中99%的人甚至根本沒有幫助(儘管有極少數例外)。那是因為圖像通常不補充他們應該支持的文本,而是用戶,將永遠加載和炸毀像某種績效稅之類的數據上限。 值得慶幸的是,這主要是一個設計問題,因為使圖像表現效果和更易於用戶友好比以前要容易得多。我們具有...
    程式設計 發佈於2025-04-16
  • 如何在php中使用捲髮發送原始帖子請求?
    如何在php中使用捲髮發送原始帖子請求?
    如何使用php 創建請求來發送原始帖子請求,開始使用curl_init()開始初始化curl session。然後,配置以下選項: curlopt_url:請求 [要發送的原始數據指定內容類型,為原始的帖子請求指定身體的內容類型很重要。在這種情況下,它是文本/平原。要執行此操作,請使用包含以下標頭...
    程式設計 發佈於2025-04-16
  • 如何修復\“常規錯誤:2006 MySQL Server在插入數據時已經消失\”?
    如何修復\“常規錯誤:2006 MySQL Server在插入數據時已經消失\”?
    How to Resolve "General error: 2006 MySQL server has gone away" While Inserting RecordsIntroduction:Inserting data into a MySQL database can...
    程式設計 發佈於2025-04-16
  • 您如何在Laravel Blade模板中定義變量?
    您如何在Laravel Blade模板中定義變量?
    在Laravel Blade模板中使用Elegance 在blade模板中如何分配變量對於存儲以後使用的數據至關重要。在使用“ {{}}”分配變量的同時,它可能並不總是最優雅的解決方案。 幸運的是,Blade通過@php Directive提供了更優雅的方法: $ old_section =...
    程式設計 發佈於2025-04-16
  • HTML格式標籤
    HTML格式標籤
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    程式設計 發佈於2025-04-16
  • 如何使用Java.net.urlConnection和Multipart/form-data編碼使用其他參數上傳文件?
    如何使用Java.net.urlConnection和Multipart/form-data編碼使用其他參數上傳文件?
    使用http request 上傳文件上傳到http server,同時也提交其他參數,java.net.net.urlconnection and Multipart/form-data Encoding是普遍的。 Here's a breakdown of the process:Mu...
    程式設計 發佈於2025-04-16
  • 如何解決由於Android的內容安全策略而拒絕加載腳本... \”錯誤?
    如何解決由於Android的內容安全策略而拒絕加載腳本... \”錯誤?
    Unveiling the Mystery: Content Security Policy Directive ErrorsEncountering the enigmatic error "Refused to load the script..." when deployi...
    程式設計 發佈於2025-04-16
  • CSS強類型語言解析
    CSS強類型語言解析
    您可以通过其强度或弱输入的方式对编程语言进行分类的方式之一。在这里,“键入”意味着是否在编译时已知变量。一个例子是一个场景,将整数(1)添加到包含整数(“ 1”)的字符串: result = 1 "1";包含整数的字符串可能是由带有许多运动部件的复杂逻辑套件无意间生成的。它也可以是故意从单个真理...
    程式設計 發佈於2025-04-16
  • 如何使用PHP從XML文件中有效地檢索屬性值?
    如何使用PHP從XML文件中有效地檢索屬性值?
    從php PHP陷入困境。 使用simplexmlelement :: attributes()函數提供了簡單的解決方案。此函數可訪問對XML元素作為關聯數組的屬性: - > attributes()為$ attributeName => $ attributeValue){ echo...
    程式設計 發佈於2025-04-16
  • 使用Lambda表達式與PyQt槽函數為何導致意外行為?
    使用Lambda表達式與PyQt槽函數為何導致意外行為?
    使用lambda表達式連接pyqt 中的插槽,可以使用lambda表達式將信號連接到插槽。但是,在某些方案中使用lambda表達式可能會導致意外行為。 考慮以下代碼:類mainwindow(qtgui.qwidget): def __init __(自我): ... ...
    程式設計 發佈於2025-04-16
  • 包在構建時找不到原因及解決方法
    包在構建時找不到原因及解決方法
    fixing fixing“無法在go build Understanding the Package Directory StructureGo expects packages to reside in directories with the same name as their pack...
    程式設計 發佈於2025-04-16
  • 反射動態實現Go接口用於RPC方法探索
    反射動態實現Go接口用於RPC方法探索
    在GO 使用反射來實現定義RPC式方法的界面。例如,考慮一個接口,例如:鍵入myService接口{ 登錄(用戶名,密碼字符串)(sessionId int,錯誤錯誤) helloworld(sessionid int)(hi String,錯誤錯誤) } 替代方案而不是依靠反射...
    程式設計 發佈於2025-04-16
  • 我可以將加密從McRypt遷移到OpenSSL,並使用OpenSSL遷移MCRYPT加密數據?
    我可以將加密從McRypt遷移到OpenSSL,並使用OpenSSL遷移MCRYPT加密數據?
    將我的加密庫從mcrypt升級到openssl 問題:是否可以將我的加密庫從McRypt升級到OpenSSL?如果是這樣,如何? 答案:是的,可以將您的Encryption庫從McRypt升級到OpenSSL。 可以使用openssl。 附加說明: [openssl_decrypt()函數要求...
    程式設計 發佈於2025-04-16
  • Python不會對超範圍子串切片報錯的原因
    Python不會對超範圍子串切片報錯的原因
    在python中用索引切片範圍:二重性和空序列索引單個元素不同,該元素會引起錯誤,切片在序列的邊界之外沒有。 這種行為源於索引和切片之間的基本差異。索引一個序列,例如“示例” [3],返回一個項目。但是,切片序列(例如“示例” [3:4])返回項目的子序列。 索引不存在的元素時,例如“示例” [9...
    程式設計 發佈於2025-04-16

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

Copyright© 2022 湘ICP备2022001581号-3