In November 2020, with the release of TypeScript 4.1, template strings became type-checkable thanks to the introduction of template literal types.
You are probably familiar with the template strings in JavaScript. It is a type of string literal in JavaScript that allows for embedding expressions inside string literals:
So the message variable contains a template string that includes two placeholders, which are replaced with the values of the name and age variables.
Let’s type the string
Until typescript version 4.1, there was no way to create a custom type of the template string to later verify if the string was matching the string pattern.
Template literal types allow you to create string literal types based on a template string's content. This allows you to create more dynamic and expressive types based on the values you're expecting.
To create a template literal type, you can start with a template string and then use the ${} syntax to insert the type.
The Greeting type is a template literal type. It's based on the contents of the string literal "Hello, $string}!", where ${string} represents a placeholder for any string value. We can then use the Greeting type as the return type for our greet function, which takes a string argument and returns a value that matches the Greeting type.
Let’s take a look at how we can make use of the template literal type with a tailwind. If we want to create a type for tailwind colors, we could easily create them and pass them as props to the component:
In this example, the type will allow for all variations of BaseColor and Variant, so 20 combinations (there is a limit of 100 000 allowed literals generated).
Let’s type the keys!
Template literal types can also be used in conjunction with key remapping in mapped types. This allows you to create more flexible and dynamic types based on the keys of an object.
We've created a Prefix type that is a mapped type based on the keys of the T type. We're using a template literal to prepend the string "prefix_" to each key of T. This creates a new type called Prefixed that has the same keys as T but with "prefix_" added to each key.
But wait, there’s more
In addition to the template literal types, TypeScript 4.5 introduced a new feature called "discriminated unions." Discriminated unions are a way to create types that can represent a variety of related but distinct values. They work by adding a discriminant property to each value, which allows TypeScript to determine the type of the value at compile-time.
We've defined two interfaces, Square and Circle, each with a kind property that serves as the discriminant. Then, we created a union-type Shape that can represent either a square or a circle. Finally, we’ve defined a function calculateArea that takes a Shape argument and uses a switch statement to determine the type of the shape at compile-time. This allows us to write type-safe code that can handle multiple related types.
In conclusion, template literal types are a powerful feature introduces almost 3 years ago in TypeScript 4.1 that allow you to create more expressive and dynamic types. They can be used to create string literal types based on the contents of a template literal, create conditional types, and even create more flexible and dynamic types based on the keys of an object. By incorporating template literal types into your TypeScript code, you can make your code more precise and more expressive, and avoid many common programming errors.
Sources:
%20(1).jpg)
