How to iterate over TypeScript union types (#tilPost)

Is it just me, or are TypeScript conditional types and the extends keyword kinda scary?
ts// What is going on? 😅type Something<T> = T extends number ? never : T;
I’ve just read Dr. Axel’s "Conditional types in TypeScript&…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

Is it just me, or are TypeScript conditional types and the extends keyword kinda scary?

ts
// What is going on? 😅
type Something<T> = T extends number ? never : T;

I've just read Dr. Axel's "Conditional types in TypeScript" and some things finally clicked for me.

Let's say we have a union type containing multiple strings.

ts
type AllColors = "Black" | "White" | "Orange" | "Red" | "Blue" | "Yellow" | "Gray";

Some people don't consider black, white and gray as colors. How could you now iterate over the union type and get these "noncolors" out of the AllColors type?

ts
// Iterate of the types included in `AllColors`.
//
// If type `T` does not extend `R` apply the `never` type.
// `never` will remove `T` from the resulting union type.
type Remove<T, R> = T extends R ? never : T;
 
// Remove "Black" and "White" from "AllColors" union type.
type RealColors = Remove<AllColors, "Black" | "White" | "Gray">;
type RealColors = "Orange" | "Red" | "Blue" | "Yellow"

Using conditional types, you can iterate over and filter union types. If you return never, it will be excluded from the resulting union type.

TypeScript includes the built-in utility types exclude and extract for these use cases, and I only picked this example to explain the concept.

That's pretty cool, but you can use conditional types also to iterate over a union type and map the resulting types.

In this example, the strings are prefixed with String: .

ts
type Random = "Joo" | "Foo" | 123 | 234;
 
// Iterate of the types included in `Random`.
//
// If type `T` is of type `string` prefix it.
type Prefix<T> = T extends string ? `String: ${T}` : T;
type MappedTypes = Prefix<Random>;
type MappedTypes = 123 | 234 | "String: Joo" | "String: Foo"

Or, if we take the color example, we could also iterate and append (noColor) to Black, White and Gray.

ts
type AllColors = "Black" | "White" | "Orange" | "Red" | "Blue" | "Yellow" | "Gray";
 
// Iterate of the types included in `AllColors`.
//
// If type `T` is of type `string` and `T` is of type `R`
// append parentheses to the string type.
type Suffix<T, R> =
T extends string
? T extends R ? `${T} (no color)` : T
: T;
type MappedColors = Suffix<AllColors, "Black" | "White" | "Gray">;
type MappedColors = "Orange" | "Red" | "Blue" | "Yellow" | "Black (no color)" | "White (no color)" | "Gray (no color)"

Granted, the nested ternary isn't pretty, but it seems to be the only way to include two conditions to TypeScript's conditional types.

And as a last trick: if your union type only includes strings, you can spare all this extends dance and use template literal types.

ts
type AllColors = "Black" | "White" | "Orange" | "Red" | "Blue" | "Yellow" | "Gray";
type AllPrefixedColors = `Color: ${AllColors}`;
type AllPrefixedColors = "Color: Black" | "Color: White" | "Color: Orange" | "Color: Red" | "Color: Blue" | "Color: Yellow" | "Color: Gray"

Good stuff!


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate Updates
APA

Stefan Judis | Sciencx (2025-02-16T23:00:00+00:00) How to iterate over TypeScript union types (#tilPost). Retrieved from https://www.scien.cx/2025/02/16/how-to-iterate-over-typescript-union-types-tilpost/

MLA
" » How to iterate over TypeScript union types (#tilPost)." Stefan Judis | Sciencx - Sunday February 16, 2025, https://www.scien.cx/2025/02/16/how-to-iterate-over-typescript-union-types-tilpost/
HARVARD
Stefan Judis | Sciencx Sunday February 16, 2025 » How to iterate over TypeScript union types (#tilPost)., viewed ,<https://www.scien.cx/2025/02/16/how-to-iterate-over-typescript-union-types-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » How to iterate over TypeScript union types (#tilPost). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/02/16/how-to-iterate-over-typescript-union-types-tilpost/
CHICAGO
" » How to iterate over TypeScript union types (#tilPost)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2025/02/16/how-to-iterate-over-typescript-union-types-tilpost/
IEEE
" » How to iterate over TypeScript union types (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2025/02/16/how-to-iterate-over-typescript-union-types-tilpost/. [Accessed: ]
rf:citation
» How to iterate over TypeScript union types (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2025/02/16/how-to-iterate-over-typescript-union-types-tilpost/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.