Typescript使用键上的intellisense将数组重新映射到对象

Question

我目前在理解Typescript映射类型时遇到了一些困难，他们在其中列出了"密钥重映射"；是可能的，但当实际尝试使用数组时，它只会在Type '"key"' cannot be used to index type 'A[E]'中出错。

注意：这是类型的问题，而不是运行时问题。

示例代码：

interface ListEntry {
key: string;
prop: string;
}
type MapListEntryArrayToRecord<A extends ListEntry[]> = {
// Error "Type '"key"' cannot be used to index type 'A[E]'"
[E in keyof A as A[E]['key']]: A[E]['prop'];
};
const input: ListEntry[] = [
{ key: 'key1', prop: 'Prop1' },
{ key: 'key2', prop: 'Prop2' },
];
function someFunction<List extends ListEntry[]>(list: List): MapListEntryArrayToRecord<List> {
// some implementation
const ret: Record<string, ListEntry['prop']> = {};
for (const { key, prop } of list) {
ret[key] = prop;
}
return ret as MapListEntryArrayToRecord<List>;
}
const mapped = someFunction(input);
// expecting intellisense for all available keys
mapped;
// example of what i would expect
const expectedOutput = {
key1: 'Prop1',
key2: 'Prop2',
};
// expecting intellisense for all available keys
expectedOutput;

附言：我试着寻找答案，但找不到任何关于如何做到这一点的打字示例。

Answer 1

这里有一些问题。

首先是input对象。如果使用显式类型，则有关指定给它的对象的特定值的所有信息都将丢失。因此，我们必须删除类型并添加as const。

const input = [
{ key: 'key1', prop: 'Prop1' },
{ key: 'key2', prop: 'Prop2' },
] as const;

使用as const将数组转换为readonly。我们将不得不修改泛型类型以接受普通数组和readonly数组。

type MapListEntryArrayToRecord<A extends readonly ListEntry[]> = {
/* ... */
};
function someFunction<List extends readonly ListEntry[]>(list: List): MapListEntryArrayToRecord<List> {
/* ... */
}

现在谈谈你最初的问题。TypeScript在知道A[keyof A]具有key属性方面存在问题。这归结为这样一个事实，即用泛型类型和类似表达式的键索引的泛型类型通常不会被编译器完全求值。

因此，我们必须通过显式检查来提醒TypeScript该属性的存在。

type MapListEntryArrayToRecord<A extends readonly ListEntry[]> = {
[E in keyof A as A[E] extends { key: infer K extends string } ? K : never]: 
A[E]['prop'];
};

游乐场