One inventive method for tagging various strings within Typescript Template Literals

Question

One inventive method for tagging various strings within Typescript Template Literals

As TypeScript 4.1 was released, many developers have been exploring ways to strictly type strings with predetermined patterns. I recently found a good solution for date strings, but now I'm tackling the challenge of Hex color codes.

The simple approach of defining HEX = 0 | 1 | ... | "E" | "F" and then declaring

type HEX_CODE = `#${HEX}${HEX}${HEX}${HEX}${HEX}${HEX}`;

creates a type that is too complex due to the union of too many types.

So, I thought about requiring the "#" symbol in front of the hex code like this:

type HEX_CODE = `#${arbitraryString}`;

However, I'm struggling to implement this. If anyone knows how to make it work or can suggest another compromise on the type, please share your insights.

typescript template-literals

Answer 1

Answer №1

Is it possible that this is just like:

declare type HexCode = `#${string}`;

check on typescript playground

Answer 2

Is it possible that this is just like:

declare type HexCode = `#${string}`;

check on typescript playground

Answer 3

Answer №2

UPDATE 28 August 2022

For the latest information, check out this answer and the updated article

Here is a solution:

UPDATE

If the string length is not equal to 6, it will now throw an error

type HexNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
type HexString = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'a' | 'b' | 'c' | 'd' | 'e' | 'f'
type StringNumber<T extends number> = `${T}`
type HEX = HexNumber | StringNumber<HexNumber> | HexString;

// More code snippets follow...

Playground

This solution should only be used for function arguments in real-world scenarios

const hex = <T extends string, U extends {
    'valid': 'valid',
    'invalid': 'invalid',
}[Check<T> extends string[] ? Mapper<Check<T>> extends T ? 'valid' : never : 'invalid']>(value: T, ...rest: U extends 'valid' ? [] : [never]) => value

const result = hex('aaaaaf') // ok
const result2 = hex('aaaaaZ') // error

Playground 2

Answer 4

UPDATE 28 August 2022

For the latest information, check out this answer and the updated article

Here is a solution:

UPDATE

If the string length is not equal to 6, it will now throw an error

type HexNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
type HexString = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'a' | 'b' | 'c' | 'd' | 'e' | 'f'
type StringNumber<T extends number> = `${T}`
type HEX = HexNumber | StringNumber<HexNumber> | HexString;

// More code snippets follow...

Playground

This solution should only be used for function arguments in real-world scenarios

const hex = <T extends string, U extends {
    'valid': 'valid',
    'invalid': 'invalid',
}[Check<T> extends string[] ? Mapper<Check<T>> extends T ? 'valid' : never : 'invalid']>(value: T, ...rest: U extends 'valid' ? [] : [never]) => value

const result = hex('aaaaaf') // ok
const result2 = hex('aaaaaZ') // error

Playground 2

One inventive method for tagging various strings within Typescript Template Literals

Answer №1

Answer №2

Similar questions

When buttons are clicked within Angular Material's Card component, it automatically triggers the click event of the card itself

Can you merge two TypeScript objects with identical keys but different values?

Discovering how to display the hidden messages section in the absence of any ongoing chats with the help of angular2

"Here's a comprehensive guide on how to connect dynamic data with angular-tree-grid components

Is it possible to iterate over an enum using Object.entries<T>(Enum).map() in TypeScript, or does it only function with string-based enums?

Error in Vuetify 3.1.2 with Vue 3 and TypeScript: Unable to assign type 'boolean' to type 'never'

Utilize multiple validators.patterns within a single value for enhanced data validation

Error encountered with object.map() function - what fundamental concept am I missing?

The 'ref' attribute is not found within the 'IntrinsicAttributes' type

I am encountering a TypeScript error with URLSearchParams. The object cannot be successfully converted to a string using the toString() method

Develop a variety of Jabber client echo bots

Sending returned values from a promise to the calling function in Angular

Angular2 app fails to update after emitting an event

Display or conceal elements within a Component with the help of a Service

I want to know the best way to send latitude and longitude coordinates from an external source in order to generate a

Capturing page titles accurately for timeonsite tracker in a single-page Angular app is challenging when navigating to other pages

A tip for transferring the value of a binding variable to a method within the template when the button is clicked

Creating an object efficiently by defining a pattern

Node.js - Creating seamless integration between Sequelize model JS and controller TS

Input the variant number TypeScript as the key value pair