Here's an overview of my current object structure:
import {
imageOne,
imageTwo
} from "./images";
export const imageKeyMap = {
"one": imageOne,
"two": imageTwo
}
The definitions for imageOne and imageTwo are as follows
import treeImage from "assets/images/tree.jpg";
import sunImage from "assets/images/sun.jpg"
interface Image {
alt: string,
src: any,
}
export const imageOne: Image = {
alt: '...',
src: treeImage
}
export const imageTwo: Image = {
alt: '...',
src: sunImage
}
My goal is to access the value of imageKeyMap using a key (a string) provided by another object.
interface BarProps {
key: string,
headline: string,
subtitle: string
}
interface FooBarProps {
image: Image,
headline: string,
subtitle: string,
}
someArray.map((element: BarProps) => {
const {key, headline, subtitle } = element
return {
image: imageKeyMap[key], // <- this is highlighted
headline: headline,
subtitle: subtitle
} as FooBarProps
})
However, I encounter the following error:
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ one: Image; two: Image; }'. No index signature with a parameter of type 'string' was found on type '{ one: Image; two: Image;}'.
Why am I unable to use the provided key to access the values in the imageKeyMap?