TypeScript中，如何利用陣列生成一個聯合型別

ChatMoney的团队發表於2024-07-02
TypeScript陣列型別

本文由 ChatMoney團隊出品
在開發中我們常常會遇到這樣一個問題，程式碼如下：

const arr = [
  "a",
  "b",
  "c",
  "d",
  "e",
  "f",
  "g",
  "h",
  "i",
  "j",
  "k",
  "l",
  "m",
  "n",
  "o",
  "p",
  "q",
  "r",
  "s",
  "t",
  "u",
  "v",
  "w",
  "x",
  "y",
  "z",
];

const func = (str) => {
    // ...
}

我們想要傳入一個引數到str，而且這個引數必須是arr陣列中的某一個元素，這時我們希望的是可以直接得到這個arr的聯合型別，接下來一般我們會使用傳統的方法去宣告型別，如下：

type Strs = "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z";

const func = (str: Strs) => {
    // ...
}

先不說這樣的寫法很笨，寫的時候就已經很ex了，我們希望的是Strs可以根據上面arr的值來自動生成一個聯合型別，這時我們可以有一個技巧來解決這個問題，就是先將str轉換為元組：

const arr = [
  "a",
  "b",
  "c",
  // ...
] as const;

沒轉換前arr的型別為string[]：

轉換成元組後：

然後我們就可以使用typeof來生成一個聯合型別：

最後我們給入參定義這個型別：

最後大功告成😎。
關於我們
本文由ChatMoney團隊出品，ChatMoney專注於AI應用落地與變現，我們提供全套、持續更新的AI原始碼系統與可執行的變現方案，致力於幫助更多人利用AI來變現，歡迎進入ChatMoney獲取更多AI變現方案！

相關文章