如何修复“类型中缺少索引签名”错误？

Question

如何解决以下类型错误？

“查询”类型的参数不能分配给“输入”类型的参数。 “查询”类型中缺少索引签名。(2345)

我使用Input 类型作为查询字符串的通用类型（包罗万象）。当我输入 Query 类型的输入时，会引发错误，但底层 JavaScript 代码运行良好。

TypeScript Playground

interface Query {
    lorem: "0" | "1"
    ipsum: string
}

const query: Query = {
    lorem: "0",
    ipsum: "Hello world"
}

interface Input {
    [key: string]: string
}

const test = (input: Input) => {
    return input["lorem"]
}

test(query)

Answer 1

解决方案 1：使用 type 而不是 interface

这是因为[key: string]: string类型与你的Query接口不兼容，后者包含两个允许的键：lorem和ipsum，而前者包含任意字符串作为键。这通常是 TypeScript 接口的一个问题：无法将特定接口保存到更通用的接口中。

但是，可以将特定类型保存为更通用的类型，因此快速的解决方案是将您的接口简单地转换为类型：

type Query = {
    lorem: "0" | "1"
    ipsum: string
}

const query: Query = {
    lorem: "0",
    ipsum: "Hello world"
}

type Input = {
    [key: string]: string
}

const test = (input: Input) => {
    return input["lorem"]
}

test(query)

解决方案2：调用test()时传播变量

另一种解决方案将简单地保留接口，但使用 ES6 对象扩展来解构/扩展变量 query，然后将其传递到 test()。通过这样做，您将强制 TypeScript 将 { ...query } 识别为可索引。

这个解决方案很聪明，但有点hack-ish，因为你可能必须在代码中添加注释来解释为什么你不能只使用test(query)而不是test({ ...query })：

interface Query {
    lorem: "0" | "1"
    ipsum: string
}

const query: Query = {
    lorem: "0",
    ipsum: "Hello world"
}

interface Input {
    [key: string]: string
}

const test = (input: Input) => {
    return input["lorem"]
}

test({ ...query })

---

有an extended thread on discussion on TypeScript's GitHub repo: 可能是一个阅读更多关于它的好地方。