使用打字稿在对象上使用动态键答案

【问题标题】：Using dynamic keys on object with typescript使用打字稿在对象上使用动态键
【发布时间】：2023-02-02 19:52:27
【问题描述】：

我有这样的功能

interface Cat {
    color: string,
    weight: number,
    cute: Boolean, // eventhough all cats are cute!
}

export const doSomething = (
    cat: Array<Cat| null>,
    index: number,
    key:  keyof typeof cat,
    payload: string | number | Boolean
) => {
    ....
    cat[key] = payload
    ....
}

这给了我

元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型

我的理解是因为 TypeScript 认为 key 可以是任何字符串而不是 "color", "weight", "cute" 之一。我如何在函数声明中说明 key 是三个 ("color", "weight", "cute") 之一？

我试过了
...
key:  keyof Cat,
...
没有运气。这个
 cat[key] = payload
现在给我

输入“字符串|编号 |布尔值 | ' 不可分配给类型 '(string & number & Boolean )

【问题讨论】：

但是cat 是Cat 元素的数组。所以就是钥匙是数组索引，因此是整数。
@GabrielePetrioli 我知道。有没有办法告诉 TypeScript 传递给 key 的 string 必须是 Cat 中定义的 keys ("color", "weight", "cute") 之一？

标签： typescript

【解决方案1】：

cat 是一个数组，所以 keyof typeof cat 是数组的键，而不是 Cat 接口。对于那些你可以使用keyof Cat

export const doSomething = (
    cat: Array<Cat | null>,
    index: number,
    key: keyof Cat,
    payload: string | number | Boolean
) => {
    cat.forEach(c => {
        if (c) {
            c[key] = payload
        }
    });
}

这仍然不太有效，因为 key 和 payload 之间没有关联，您可以调用 doSomething(.., ..., 'cute', 1)。

您需要添加一个通用类型参数以将有效负载绑定到密钥：

export const doSomething = <K extends keyof Cat>(
    cat: Array<Cat | null>,
    index: number,
    key: K,
    payload: Cat[K]
) => {
    cat.forEach(c => {
        if (c) {
            c[key] = payload
        }
    });
}

【讨论】：

我明白。你能解释一下 <K extends keyof Cat> 这一行的作用吗？我明白keyof Cat 的意思，但不与extends、<> 和() 并列。