To make a simple map object type from a union type, you can use the in operator in combination with Index Signature syntax in TypeScript.
TL;DR
// String literal union type
type Colors = "blue" | "green" | "red" | "yellow";
// make a map object type from `Colors` union type
// we are using the `in` operator inside the
// `Index Signature` syntax brackets to iterate though
// every values in the union type and assign
// that value as the key in the object type
type MapObjectType = { [Color in Colors]: string };
// if you hover the `MapObjectType` type you will see this 👇🏽
/*
type MapObjectType = {
blue: string;
green: string;
red: string;
yellow: string;
}
*/
For example, let's say we have a string literal union type called Colors composed of strings like blue, green, red, and yellow like this,
// String literal union type
type Colors = "blue" | "green" | "red" | "yellow";
Now to make a map object type from the above Colors string literal union type where the key of the map object should be one of the values in the Colors union type.
To do that we have to use the in operator on the Colors union type inside the Index Signature syntax like this,
// String literal union type
type Colors = "blue" | "green" | "red" | "yellow";
// make a map object type from `Colors` union type
// we are using the `in` operator inside the
// `Index Signature` syntax brackets to iterate though
// every values in the union type and assign
// that value as the key in the object type
type MapObjectType = { [Color in Colors]: string };
As you can see from the above code we have used the in operator followed by the Colors type inside the square brackets (aka Index Signature syntax). The in operator iterates through every value in the union type and assigns that value to the Color which in turn creates a key type for the object with that value. Also in our case, we have supplied a type of string for the key's property value. You can have any valid type for the property.
Now if we hover over the MapObjectType type we can see that the map object type made up of all the colors from the Colors type is generated which is exactly what we need.
It will look like this,
// String literal union type
type Colors = "blue" | "green" | "red" | "yellow";
// make a map object type from `Colors` union type
// we are using the `in` operator inside the
// `Index Signature` syntax brackets to iterate though
// every values in the union type and assign
// that value as the key in the object type
type MapObjectType = { [Color in Colors]: string };
// if you hover the `MapObjectType` type you will see this 👇🏽
/*
type MapObjectType = {
blue: string;
green: string;
red: string;
yellow: string;
}
*/
We have successfully made a map object type from union type in TypeScript. Yay 🥳!
See the above code live in codesandbox.
That's all 😃!
Top comments (0)