typescript - 如何修复 "Index signature is missing in type"错误？

Question

如何修复以下类型错误？

Argument of type 'Query' is not assignable to parameter of type 'Input'. Index signature is missing in type 'Query'.(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

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

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

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)

方案二:调用 test()时传播变量

另一种解决方案将简单地保留接口(interface)，但使用 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 : 可能是一个阅读更多关于它的好地方。