javascript - 从对象数组中的属性创建字符串文字联合

Question

是否可以获得对象特定属性的静态数组的文字字符串联合类型？
比如我要曝光IconName作为一种从对象数组中推断出来的文字字符串。
我已经看到将只读数组转换为字符串文字联合已经完成，但不是通过对象数组。
我认为这是不可能的，因为我们需要一些运行时解释功能来访问数组的值。但这是我试图通过这个 slim 的例子来工作的例子https://codesandbox.io/s/svelte-typescript-forked-ef75y :

<script lang="ts">
interface Icon {
  name: string
  color: string
}

const icons: readonly Icon[] = <const>[
  {
    name: "close",
    color: "red"
  },
  {
    name: "open",
    color: "blue"
  }
];

const tuple = <K extends string[]>(...arr: K) => arr;
const iconNames = tuple(...icons.map(i => i.name));

type IconName = typeof iconNames[number];

export let name: IconName;

let displayIcon = icons.find((e) => e.name === name);
</script>


<h1>{displayIcon.color}</h1>

Answer 1

我想下面的代码会做你想做的事情。但是，我建议将您的类型定义写在一个带有 .ts 扩展名的单独文件中。

<script lang="ts">
    interface Icon {
        name: string;
        color: string;
    }

    const icons = {
        close: {
            name: "close",
            color: "red",
        },
        open: {
            name: "open",
            color: "blue",
        },
    } as const;

    type IconName = keyof typeof icons;

    export let name: IconName;

    let displayIcon = icons[name];
</script>

<h1>{displayIcon.color}</h1>