How Template Literal Types work in TypeScript
📣 Sponsor
Template Literals are common in Javascript: they let us easily combine variables and strings in Javascript. TypeScript also introduces the concept of Template Literal Types, where we can enforce types on the inputs for Template literals. That gives us controls to ensure that text is in a certain format. Let’s look at how they work.
Template Literal Types in TypeScript
A perfect example of when a template literal type might be useful is for creating IDs of certain formats. For example, let’s say we have an ID which starts with ‘ga-’ or ‘ua-’, followed by a string or number. We can define a new type using type literals for that like so:
type startOfId = "ga-" | "ua-";
type ID = `${startOfId}${string | number}`;
That means that the first part of type ID
needs to conform to type startOfId
, while the second bit can be a string
or number
. The entire type ID
must be a string, since a template literal implies a string type.
Now we can use our type on variables we want to conform to this pattern. For example:
type startOfId = "ga-" | "ua-";
type ID = `${startOfId}${string | number}`;
let newId:ID = "ga-12abc3456";
Combining with Generic Types
If you want to get even fancier, you can combine template literal types with generic types. Below, we have two types, genericType
and user
:
type genericType<Type> = {
name: `${string & keyof Type} object property`
}
type user = {
name: string,
age: number,
description: string
}
let myObject:genericType<user> = {
name: "age object property"
}
Since genericType
accepts another type as an argument, we can pass in user
, so now the name
property in myObject
can only be age object property
, name object property
or description object property
More Tips and Tricks for Typescript
- The Difference between TypeScript and Javascript
- How the TypeScript Extract Type Works
- How the TypeScript Required Type Works
- How to setup a new Project in Typescript
- How to convert a String to a Number in TypeScript
- How Intrinsic Type Manipulations work in TypeScript
- Creating Custom Types in Typescript
- TypeScript Optional Parameters
- How the TypeScript Record Type Works
- How the TypeScript Partial Type Works