时间戳

首页 > 解决方案 > 打字稿：从对象数组派生联合类型

javascript - 打字稿：从对象数组派生联合类型

问题描述

我想声明一个类型强制的项目数组，并能够从中派生一个联合类型。如果您没有明确地为数组中的项目指定类型，则此模式有效。我不确定如何最好地解释它，所以这里是一个例子：

例 1

type Pair = {
  key: string;
  value: number;
};

const pairs: ReadonlyArray<Pair> = [
  { key: 'foo', value: 1 },
  { key: 'bar', value: 2 },
] as const;

type Keys = typeof pairs[number]['key']

例 2

type Data = {
  name: string;
  age: number;
};

const DataRecord: Record<string, Data> = {
  foo: { name: 'Mark', age: 35 },
  bar: { name: 'Jeff', age: 56 },
} as const;

type Keys = keyof typeof DataRecord;

下面是使用as const. 我想要同样的行为，但数组被显式键入。

const pairs = [
  { key: 'foo', value: 1 },
  { key: 'bar', value: 2 },
] as const;

type Keys = typeof pairs[number]['key']; // "foo" | "bar"

所需的键值："foo"|"bar"

键的实际值：string

标签： javascripttypescriptconstantstypeofkeyof

解决方案

对于变量，您可以让编译器从初始化中推断类型，也可以显式写出。如果您像以前一样显式编写它，则将根据注释检查初始化值，但初始化器的实际类型不会影响变量的类型（因此您会丢失所需的类型信息）。如果您让编译器推断它，则不再可能约束类型以符合特定接口（如您所愿）

解决方案是使用通用函数来约束值并推断它的实际类型：

type Pair = {
  key: string;
  value: number;
};
function createPairsArray<T extends readonly Pair[] & Array<{key: V}>, V extends string>(...args: T) {
    return args
}

const pairs = createPairsArray(
  { key: 'foo', value: 1 },
  { key: 'bar', value: 2 },
)

type Keys1 = typeof pairs[number]['key']

type Data = {
  name: string;
  age: number;
};

function createDataObject<T extends Record<string, Data>>(arg: T) {
    return arg;
}
const DataRecord = createDataObject({
  foo: { name: 'Mark', age: 35 },
  bar: { name: 'Jeff', age: 56 },
})

type Keys2 = keyof typeof DataRecord;

游乐场链接

注意：对于数组的情况，我们需要稍微加强编译器来推断 的字符串字面量类型key，因此整个& Array<{key: V}>,V类型参数在哪里扩展string

推荐阅读