根据列表中对象的属性定义 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 链接到代码