从嵌套参数中提取类型

Question

我想在返回类型中使用函数参数的值。

考虑以下函数：

export function trackKeys(node: HTMLElement, { names }: {
    names: string[];
}) {
    const methods: { [k in typeof names[number]]: (e: Event) => void } = names.reduce((obj, name) => {
        return {
            ...obj,
            [name]: (e: Event) => {
                // Do something
            },
        };
    }, {});
}

这里，“方法”的类型为{ [k in typeof names[number]]: (e: Event) => void }，本质上变成了“字符串”。我想从提供给函数的“名称”参数中提取对象键。所以它会是这样的：
{ [k in "john"|"david"|"henry"]: (e: Event) => void } 如果函数被称为trackKeys(node, {names: ["john", "henry", "david"]});

一个例子：

const obj = trackKeys(node, {names: ["apple", "potato"]});
//Expected type {"apple":(e: Event) => void, "potato":(e: Event) => void};

Answer 1

您需要一个泛型并将数组作为const 传递，因此它的值作为类型的一部分是固定的。

export function trackKeys<N extends readonly string[]>(
    node: HTMLElement,
    { names }: { names: N },
) {
    const methods = names.reduce((obj, name) => {
        return {
            ...obj,
            [name]: (e: Event) => {
                // Do something
            },
        };
    }, {});

    return methods as { [k in N[number]]: (e: Event) => void };
}

const obj = trackKeys(node, { names: ["apple", "potato"] as const });