All Blogs

TypeScript Mapped Union Type

Recently, a coworker at Nx approaches me with a TypeScript problem that we both thought “It seems simple” at first. We soon find that it’s not as simple as we thought. In this blog post, I’ll walk you through the problem, the seems to be solution, the solution, and the thought process behind them.

The Problem

1
declare function table(items: any[], fieldOptions: any[]): void;

The “seems to be” Solution

At first glance, it seems easy. We’ll go through each step.

The Solution

Out of frustration, I asked for help in trashh_dev Discord and Tom Lienard provided the solution with a super neat trick. I’ll attempt to go through the thought process to understand the solution

What we’re stuck on is we’re so hung up on the idea of FieldOption needs to be an object type {field: keyof TItem, mapFn} but in reality, what we actually need is as follow

1
// let's assume we're working with {foo: string, bar: number} for now instead of a generic to simplify the explanation
2
3
// what we think we need
4
type FieldOption = {
5
field: "foo" | "bar";
6
mapFn: (value: string | number) => string;
7
};
8
9
// what we actually need
10
type FieldOption =
11
| {
12
field: "foo";
13
mapFn: (value: string) => string;
14
}
15
| {
16
field: "bar";
17
mapFn: (value: number) => string;
18
};

Yes, we need a Mapped Union from our TItem instead of a single object with union properties. The question is how we get to the Mapped Union. Well, it is a 2-step process

  1. We need to convert TItem into a Mapped Type
1
type FieldOption<TItem extends Record<string, unknown>> = {
2
[TField in keyof TItem]: {
3
field: TField;
4
mapFn: (value: TItem[TField]) => string;
5
};
6
};
7
8
type Test = FieldOption<{ foo: string; bar: number }>;
9
// ^? {
10
// foo: { field: 'foo'; mapFn: (value: string) => string };
11
// bar: { field: 'bar'; mapFn: (value: number) => string };
12
// }
  1. We need to map over the Mapped Type with keys of TItem to get the Mapped Union
1
type FieldOption<TItem extends Record<string, unknown>> = {
2
[TField in keyof TItem]: {
3
field: TField;
4
mapFn: (value: TItem[TField]) => string;
5
};
6
}[keyof TItem];
7
8
type Test = FieldOption<{ foo: string; bar: number }>;
9
// ^? | { field: 'foo'; mapFn: (value: string) => string }
10
// | { field: 'bar'; mapFn: (value: number) => string }

Now, let’s try using table() with our Mapped Union type to see if it works

1
type FieldOption<TItem extends Record<string, unknown>> =
2
| keyof TItem
3
| {
4
[TField in keyof TItem]: {
5
field: TField;
6
mapFn: (value: TITem[TField]) => string;
7
};
8
}[keyof TItem];
9
10
declare function table<TItem extends Record<string, unknown>>(
11
items: TTem[],
12
fields: FieldOption<TItem>[],
13
): void;
14
15
const items = [
16
{ foo: "string", bar: 123 },
17
{ foo: "string2", bar: 1234 },
18
];
19
20
table(items, [
21
{
22
field: "foo",
23
mapFn: (value) => {
24
// ^? value: string
25
return "";
26
},
27
},
28
{
29
field: "bar",
30
mapFn: (value) => {
31
// ^? value: number
32
return "";
33
},
34
},
35
]);

And that is our solution. So simple, yet so powerful trick. Here’s the TypeScript Playground that you can play with.

If anyone knows the correct term for Mapped Union, please do let me know so I can update the blog post.

Published on Sun Mar 12 2023


TypeScript