根據列表中對象的屬性定義 Typescript 類型

Question

假設我有一個對象列表，例如：

const TABS = [
  {
        name: 'Home',
        // other properties
  },
  {
        name: 'Profile',
        // other properties
  }
];

如何定義type Tab ，它是列表中每個對象的“名稱”字段的類型？ 基本上相當於

type Tab = 'Home' | 'Profile';

在上述情況下（但無需在兩個定義中重復“主頁”和“個人資料”）。

Answer 1

只要TABS的值在編譯時是已知的，並且您阻止編譯器將其類型擴展為Array<{name: string}>類的內容，這就是可能的。 您希望編譯器記住您放入name屬性的值的特定字符串文字類型，而不僅僅是將它們視為string 。 最簡單的方法是在創建時對TABS數組文字使用const斷言：

const TABS = [
  {
    name: 'Home',
  },
  {
    name: 'Profile',
  }
] as const; // <-- need this 

現在，編譯器知道TABS是一對對象和第一個有name的字符串文字類型的財產"Home" ，而第二個有name的字符串文字類型的財產"Profile" 。

此時，您可以僅使用查找類型來獲取TABS類型的數字（ number ）索引處元素的name屬性：

type Tab = (typeof TABS)[number]["name"];
// type Tab = "Home" | "Profile"

Playground 鏈接到代碼