How to make a map object type from a union type in TypeScript?
Tags: typescript
Published: 2022-02-05 00:00:00

---
  title: How to make a map object type from a union type in TypeScript?
  published: true
  tags: TypeScript
  date: Sat Feb 05 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-map-object-type-from-union-types-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-da352301b2cb583cdabf821774555d2b.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-map-object-type-from-union-types-typescript)
  
To make a simple map object type from a union type, you can use the `in` operator in combination with [`Index Signature` syntax](https://melvingeorge.me/blog/type-to-use-for-objects-when-properties-are-not-known-ahead-typescript) in TypeScript.

### TL;DR

```ts
// 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,

```ts
// 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](https://melvingeorge.me/blog/type-to-use-for-objects-when-properties-are-not-known-ahead-typescript) like this,

```ts
// 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,

```ts
// 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](https://codesandbox.io/s/make-map-object-type-from-union-types-typescript-9p8hpu?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---