Method 1: Utilize the type Keyword Instead of interface
The reason for this is because the type [key: string]: string does not align with your Query interface, which only allows two specific keys: lorem and ipsum, while the former permits any arbitrary string as a key. This issue arises from TypeScript's constraint on interfaces - a more restrictive interface cannot be assigned to a broader interface.
Nevertheless, it is feasible to assign a specialized type to a more general one. Hence, a simple resolution would be to convert your interface into types:
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)
Method 2: Incorporate Object Spread when Invoking test()
An alternate approach involves retaining the interfaces but utilizing ES6 object spread to disseminate the variables within query before invoking test(). By employing this method, TypeScript will recognize { ...query } as indexable.
This technique is ingenious yet somewhat unconventional, as it may require adding comments in the code to elucidate why using test({ ...query }) over test(query) is necessary:
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 })
For further insights, refer to an extended discussion thread on TypeScript's GitHub repository.