TypeScript - Template Literal Types

Hello there, future coding superstars! Today, we're going to embark on an exciting journey into the world of TypeScript and explore a fascinating feature called Template Literal Types. Don't worry if you're new to programming – I'll guide you through this step-by-step, just like I've done for countless students over my years of teaching. So, grab your favorite beverage, get comfortable, and let's dive in!

What are Template Literal Types?

Before we jump into the nitty-gritty, let's understand what Template Literal Types are. Imagine you're creating a greeting card. You have a basic template, but you want to personalize it with different names and messages. That's essentially what Template Literal Types do in TypeScript – they allow us to create flexible, reusable type definitions that can change based on what we input.

Syntax

The syntax for Template Literal Types might look a bit strange at first, but I promise it's not as complicated as it seems. Here's the basic structure:

type TemplateLiteralType = `prefix ${SomeType} suffix`;

Let's break this down:

• type is a keyword in TypeScript that we use to define a new type.
• TemplateLiteralType is the name we're giving to our new type (you can choose any name you like).
• The backticks (`) are used to enclose our template.
• ${SomeType} is a placeholder where we can insert another type.
• prefix and suffix are optional text that will always be part of our type.

Think of it like a Mad Libs game, where ${SomeType} is the blank we fill in to create different variations.

Examples

Now, let's look at some examples to see how Template Literal Types work in practice. I'll provide plenty of code samples and explain each one thoroughly.

Example 1: Basic Usage

type Greeting = `Hello, ${string}!`;

let myGreeting: Greeting = "Hello, World!";  // This is valid
let invalidGreeting: Greeting = "Hi there!"; // This will cause an error

In this example, we've created a Greeting type that must always start with "Hello, " and end with "!". The ${string} part means we can put any string in between. It's like having a greeting card template where you can only change the name.

Example 2: Combining String Literals

type Color = "red" | "blue" | "green";
type Size = "small" | "medium" | "large";

type TShirt = `${Size}-${Color}`;

let myShirt: TShirt = "medium-blue";  // This is valid
let invalidShirt: TShirt = "tiny-yellow";  // This will cause an error

Here, we're creating a TShirt type by combining two other types: Size and Color. This allows us to create valid combinations like "small-red" or "large-green", but prevents invalid ones like "tiny-yellow".

Example 3: Using Numbers

type Coordinate = `${number},${number}`;

let point: Coordinate = "10,20";  // This is valid
let invalidPoint: Coordinate = "10,20,30";  // This will cause an error

In this example, we're using number instead of string. This creates a type that represents a 2D coordinate. It must be two numbers separated by a comma.

Example 4: Complex Templates

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
type ApiEndpoint = `/${string}`;

type ApiRoute = `${HttpMethod} ${ApiEndpoint}`;

let validRoute: ApiRoute = "GET /users";
let anotherValidRoute: ApiRoute = "POST /update-profile";
let invalidRoute: ApiRoute = "PATCH /items";  // This will cause an error

This example shows how we can create more complex types. We're defining an ApiRoute type that combines an HTTP method with an endpoint. This ensures that our API routes always follow a specific format.

Example 5: Uppercase and Lowercase Modifiers

type Greeting = "hello" | "hi" | "hey";
type ShoutingGreeting = Uppercase<Greeting>;
type WhisperingGreeting = Lowercase<Greeting>;

let loud: ShoutingGreeting = "HELLO";  // This is valid
let soft: WhisperingGreeting = "hi";   // This is valid
let invalid: ShoutingGreeting = "Hey"; // This will cause an error

TypeScript also provides utility types like Uppercase and Lowercase that we can use with our Template Literal Types. This example shows how we can create new types that are uppercase or lowercase versions of existing types.

Methods Table

Here's a table summarizing the key methods and utilities we've discussed:

Method/Utility	Description	Example
Basic Template	Creates a type with fixed prefix/suffix and a variable part	type Greeting = 'Hello, ${string}!'
Union Types	Combines multiple string literal types	type Color = "red" \| "blue" \| "green"
Uppercase	Converts a string literal type to uppercase	type Upper = Uppercase<"hello">
Lowercase	Converts a string literal type to lowercase	type Lower = Lowercase<"HELLO">

Conclusion

And there you have it, my dear students! We've explored the wonderful world of Template Literal Types in TypeScript. From basic usage to more complex examples, you've seen how this feature can help us create more precise and flexible type definitions.

Remember, like learning any new skill, mastering Template Literal Types takes practice. Don't be discouraged if it doesn't click immediately – I've seen countless students struggle at first only to have that "aha!" moment later. Keep experimenting, try creating your own types, and most importantly, have fun with it!

In my years of teaching, I've found that the students who enjoy the learning process are the ones who excel. So, think of TypeScript as a powerful tool in your coding toolbox, and Template Literal Types as a swiss army knife within that toolbox – versatile, precise, and incredibly useful when you know how to wield it.

Now, go forth and create amazing things with your newfound knowledge. And remember, in the world of programming, the only limit is your imagination (and maybe sometimes your compiler, but that's a story for another day). Happy coding!

Credits: Image by storyset