How Template Literal Types work in TypeScript

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