In search of a custom TypeScript type that encompasses all conceivable combinations of Template Literal Types

Question

In search of a custom TypeScript type that encompasses all conceivable combinations of Template Literal Types

For my current project, I am tasked with defining a TypeScript type known as CardSize. This type has several possible variations, including static values, responsive (breakpoint-specific) values, and combinations of both separated by white space.

The singular values for CardSize are:

type CardSize =
'compact' |
'normal' |
'compact@small' |
'compact@medium' |
'compact@large' |
'normal@small' |
'normal@medium' |
'normal@large';

My ultimate goal is to create a CardSize type that allows for any combination of these values, without repetition and regardless of the order in which they appear. The use of Template Literal Types seems like the first step towards achieving this:

type CardSize = Size | `${Size}@${Breakpoint}`;

I have attempted to explore Permutations in order to generate all possible combinations of values but have faced some challenges in implementing it effectively.

In addition, I would like to impose two constraints on the CardSize type:

1. Restricting each string to contain only one specific breakpoint-value at a time (e.g. avoiding having both 'compact@small' and 'normal@small' in the same string)

2. Considering different sequences of values as equivalent, such as 'compact@small @normal@large' being treated the same as 'normal@large compact@small'

If anyone has insights on how to achieve this type of permutation or ensure type safety for CardSize without resorting to | string as a fallback, it would be greatly appreciated!

typescript typescript-typings

Answer 1

Answer №1

You have the ability to create a union type of string values by recursively concatenating them using template literal types in TypeScript. However, it's important to note that the number of permutations and combinations increases rapidly as you add more elements to permute and combine. TypeScript has limitations when it comes to building unions with tens of thousands of elements, impacting compiler performance. Therefore, this approach is best suited for handling small numbers of elements.

The example you provided for `CardSize` works well since you only have two sizes and four breakpoints:

type CardSize = BuildCardSizes<'compact' | 'normal', '' | '@small' | '@medium' | '@large'>

The `BuildCardSizes` type function allows you to utilize elements from `S` as many times as needed while restricting the use of elements from `B` to just once. The following code defines this function:

type BuildCardSizes<S extends string, B extends string, BB extends string = B> =
    B extends any ? (`${S}${B}` | `${S}${B} ${BuildCardSizes<S, Exclude<BB, B>>}`) : never;

This function breaks down the union of breakpoints represented by `B` and uses a distributive conditional type to handle each element individually. Each acceptable card size consists of either `${S}${B}`, which concatenates an element from `S` with a particular breakpoint `B`, or `${S}${B} ${BuildCardSizes>}`, combining the current element with the rest excluding `B` from all breakpoints.

Testing your example:

c = 'normal compact@small' // valid
c = 'compact@small normal' // valid
c = 'compact@small normal normal@large compact@medium' // valid
c = 'normal@small normal@medium normal@large normal' // valid

c = 'compact@small normal@small' // invalid
c = 'compact normal' // invalid
c = 'normal@small normal@medium normal@large normal normal@big' // invalid
c = '' // invalid

This implementation seems to be working effectively for your scenario. For dealing with larger sets of elements, alternate approaches involve using generic constraints to validate whether a given value is acceptable. These methods are more intricate and may require different strategies beyond the scope covered here.

Feel free to explore other techniques for handling larger datasets outside of generating the specific union of possible values. You can refer to examples demonstrating generic constraints for ensuring value acceptability. Keep experimenting with different solutions to find the most suitable one for your requirements!

Answer 2

You have the ability to create a union type of string values by recursively concatenating them using template literal types in TypeScript. However, it's important to note that the number of permutations and combinations increases rapidly as you add more elements to permute and combine. TypeScript has limitations when it comes to building unions with tens of thousands of elements, impacting compiler performance. Therefore, this approach is best suited for handling small numbers of elements.

The example you provided for `CardSize` works well since you only have two sizes and four breakpoints:

type CardSize = BuildCardSizes<'compact' | 'normal', '' | '@small' | '@medium' | '@large'>

The `BuildCardSizes` type function allows you to utilize elements from `S` as many times as needed while restricting the use of elements from `B` to just once. The following code defines this function:

type BuildCardSizes<S extends string, B extends string, BB extends string = B> =
    B extends any ? (`${S}${B}` | `${S}${B} ${BuildCardSizes<S, Exclude<BB, B>>}`) : never;

This function breaks down the union of breakpoints represented by `B` and uses a distributive conditional type to handle each element individually. Each acceptable card size consists of either `${S}${B}`, which concatenates an element from `S` with a particular breakpoint `B`, or `${S}${B} ${BuildCardSizes>}`, combining the current element with the rest excluding `B` from all breakpoints.

Testing your example:

c = 'normal compact@small' // valid
c = 'compact@small normal' // valid
c = 'compact@small normal normal@large compact@medium' // valid
c = 'normal@small normal@medium normal@large normal' // valid

c = 'compact@small normal@small' // invalid
c = 'compact normal' // invalid
c = 'normal@small normal@medium normal@large normal normal@big' // invalid
c = '' // invalid

This implementation seems to be working effectively for your scenario. For dealing with larger sets of elements, alternate approaches involve using generic constraints to validate whether a given value is acceptable. These methods are more intricate and may require different strategies beyond the scope covered here.

Feel free to explore other techniques for handling larger datasets outside of generating the specific union of possible values. You can refer to examples demonstrating generic constraints for ensuring value acceptability. Keep experimenting with different solutions to find the most suitable one for your requirements!

In search of a custom TypeScript type that encompasses all conceivable combinations of Template Literal Types

Answer №1

Similar questions

Using Iframe for WooCommerce integration and implementing Facebook login within an Ionic application

Issue with Codemirror lint functionality not functioning properly in a React/Redux/Typescript application

Resolve the clash between Jest and Cypress within a React application developed using TypeScript

Listen for incoming data from the client in the form of an ArrayBuffer

Exploring the Nested JSON Data Loop with *ngFor in Angular 5/4

TypeScript Color Definitions in React Native

Conditionally setting a property as optional in Typescript

How can I export the styling from vite library mode in a React application?

Injecting dynamic templates in Angular 7

Setting up an OR guard in NestJS is a crucial step in managing

The find functionality in Angular and Firebase seems to be malfunctioning

The type 'Observable<{}>' cannot be assigned to the type 'Observable'

Styling components is not about overpowering with emotions

Bring in the express app within my API controller

The argument with type 'void' cannot be assigned to a parameter with type 'Action'

Difficulty encountered while trying to register NavBar component within App.vue

Angular/NestJS user roles and authentication through JWT tokens

What is the best way to update a BehaviorSubject holding an array without replacing the entire array?

What is the process for testing an iframe and retrieving all of the response headers?

Convert the encoding of the FileReader's output to UTF-8