打字稿接口对象属性值作为键

Question

当尝试将对象数组映射到具有相同对象但使用属性值作为索引键的数组时，我尝试为情况创建正确的类型。

Code on playground

interface ValueDefinition {
    name: string;
}

function getByName<V extends ValueDefinition>(valuDefinitions: V[]) {
    let out  = {}

    for (const key in valuDefinitions) {
        out[valuDefinitions[key].name] = valuDefinitions[key];
    }
    return out;
}

const obj: ValueDefinition = {
    name: 'super'
};


const objKey = getByName([
    obj
]);

key.super; // Typings for this output

我正在寻找这样的东西：

type WithKey<D extends ValueDefinition> = {
    [key: D['name']]: D;
}

谢谢。

Answer 1

您应该在name 属性的字符串文字类型中使您的ValueDefinition 接口通用，以便稍后提取它：

interface ValueDefinition<K extends string = string> {
    name: K
}

然后您可以将getByName() 函数的输出表示为以下映射类型：

type ValueDefinitionObject<K extends string> = {[P in K]: ValueDefinition<P>}

并将getByName 的签名修改为在name 文字集中的通用：

function getByName<K extends string>(valuDefinitions: Array<ValueDefinition<K>>): ValueDefinitionObject<K> {
    let out = {} as ValueDefinitionObject<K>
    for (const key in valuDefinitions) {
        out[valuDefinitions[key].name] = valuDefinitions[key];
    }
    return out;
}

此时它将起作用，但您必须小心声明您的obj，以便将值'super' 的类型推断为'super' 而不是string。此身份功能将有所帮助：

function asValueDefinition<K extends string>(vd: ValueDefinition<K>): ValueDefinition<K> {
    return vd;
}

好的，让我们试试（我正在添加另一个）：

const obj = asValueDefinition({ name: 'super' });
const obj2 = asValueDefinition({ name: 'thing' });

如果您检查它们，它们会显示为 ValueDefinition<'super'> 和 ValueDefinition<'thing'>。

const objKey = getByName([obj, obj2]);  

而objKey 被键入为ValueDefinitionObject<'super'|'thing'>。让我们使用它：

objKey.super; // okay, ValueDefinition<'super'>
objKey.thing; // okay, ValueDefinition<'thing'>
objKey.nope; // error, property 'nope' doesn't exist

这对你有用吗？祝你好运！