Question

给出一个接口，我想创建一个选择该接口属性的函数，该属性可以指定为输入参数。

这是我最近来的

interface Source {
    a?: string;
    b?: boolean;
    c?: number;
}

function getPropertyFromFirstExisting(
    arr: Source[],
    property: keyof Source
): Source[keyof Source] {
    return arr.map(el => el[property]).filter(prop => !!prop)[0];
}

const sourceArr = [
    { a: 'asdf', c: 12 },
    { b: true }
];

interface Target {
    a: string;
    b: boolean;
    c: number;
}

const result: Target = {
    // the property result.a should only be string type
    a: getPropertyFromFirstExisting(sourceArr, 'a'),
    // the property result.b should only be boolean type
    b: getPropertyFromFirstExisting(sourceArr, 'b'),
    // the property result.c should only be number type
    c: getPropertyFromFirstExisting(sourceArr, 'c')
};

在这种情况下，getPropertyFromFirstExisting的返回类型为string | boolean | number，但是有一个很好的解决方案，根据property的输入参数，它应该只是其中的一种。这可能吗？

Here's a link to the example in the TypeScript playground.

Answer 1

您非常接近，但是Source[keyof Source]将为您提供Source中所有可能值的并集，您需要一个额外的类型参数来捕获传入的实际键并将其用于将查询键入到Source：

function getPropertyFromFirstExisting<K extends keyof Source>(
    arr: Source[],
    property: K
): Source[K] {
    return arr.map(el => el[property]).filter(prop => !!prop)[0];
}

Playground link

函数的返回类型可以取决于输入参数的值吗？

1 个答案: