前端 - TypeScript 里如何提取一个对象数组里的一个变量类型？

Question

问题背景：
如下图，我有个数组，是一个常量

const tabList = [
  { label: "攻略", name: "playground" },
  { label: "商城", name: "store" },
  { label: "论坛", name: "topic" },
  { label: "用户", name: "user" },
]

我现在想定义一个变量 current ，我想这个变量的值是 label 这四个字符串的其中一个。

我了解到，我可以重新声明一个 type Tab = "攻略"|"商城"... 这样一个类型，然后给 tabList 和 current 分别使用。

但是有没有一种方法直接让 Ts 提取出 tabList 的 label 元素自动提取呢？有点类型体操的感觉

Answer 1

const tabList = [
  { label: "攻略", name: "playground" },
  { label: "商城", name: "store" },
  { label: "论坛", name: "topic" },
  { label: "用户", name: "user" },
] as const; 

type TabList = typeof tabList;
type Label = TabList[number]["label"]; 
let current: Label; // Now, current can only be "攻略", "商城", "论坛", or "用户"

Answer 2

  const tabList = [
    { label: "攻略", name: "playground" },
    { label: "商城", name: "store" },
    { label: "论坛", name: "topic" },
    { label: "用户", name: "user" },
  ]

  type TabListLabel = typeof tabList[number]['label']; // 获取 tabList 中每个元素的 label 属性所组成的联合类型

  let current: TabListLabel;
    current = '攻略';
  current = '商城';
  current = '论坛';
  current = '用户';
    current = '其他'; // 报错：Type '"其他"' is not assignable to type '"攻略" | "商城" | "论坛" | "用户"'