I am unable to create union type from Map. Here is a simple example of what I am trying to do:
const myMap = new Map ([
['one', <IconOne/>],
['two', <IconTwo/>],
['three', <IconThree/>],
]);
// I know i can make it not like Map. But I have data like Map, and can't change it now.
type Props = {
name: 'one' | 'two' | 'three';
// i need this type here, but have no idea how to make this type from map keys
// tryed use "typeof" "keyof" but have no idea how to do it right
}
export const Component = ({name}: Props) => (
<div>
{myMap.get(name)}
</div>
)
2
Answers
You will need to change the
Map
definition to useas const
(otherwise you just getstring
as the key type), then you can writeSee the correct answer from @Bergi: https://stackoverflow.com/a/77887764/15076557
Below is my attempt to an answer — maybe other methods I provided will be helpful to someone else.
I don’t think you can do this with your setup.
If you look at the type of
myMap
, it will beMap<string, string>
— typescript doesn’t narrow this type to any of your keys or values. So, even a solution like in this answer would not help, meaning you likely will have to bring out the data you pass toMap
to some variable/type in one way or another.Now, one of the closest solutions might be taking out the keys to a separate type and then using it in
myMap
andProps
:Another way is to define the keys and values using an array and
as const
assertion to narrow the types, and infer them into a separate type, and once again use it inmyMap
andProps
: