What are template literal types in Typescript ?
Template literal types in TypeScript allow the construction of new string literal types by combining existing string literal types using template literal syntax.
- They enable the creation of complex string patterns by embedding unions and other literal types within template literals.
- This feature enhances type safety by allowing developers to define and enforce specific string formats at the type level.
type Size = "small" | "medium" | "large";
type SizeMessage = `The selected size is ${Size}.`;
let message: SizeMessage;
message = "The selected size is small."; // Valid
message = "The selected size is extra-large."; // Error
- Size is a union type representing possible sizes.
- SizeMessage is a template literal type that constructs specific string patterns incorporating each Size value.
- The variable message can only be assigned strings that match the SizeMessage pattern.
Output:
Type '"The selected size is extra-large."' is not assignable to type 'SizeMessage'.More Example of template literal types in Typescript
Defining Paths Using TypeScript Literals
type ApiEndpoints = "users" | "posts" | "comments";
type ApiPath = `/api/${ApiEndpoints}`;
const userPath: ApiPath = "/api/users";
const invalidPath: ApiPath = "/api/unknown";
- ApiEndpoints is a union type representing possible API endpoint names.
- ApiPath is a template literal type that dynamically constructs string patterns prefixed with /api/ followed by one of the ApiEndpoints.
- userPath is valid because it matches the constructed pattern, while invalidPath throws an error.
Output:
Type '"/api/unknown"' is not assignable to type 'ApiPath'.Formatting Messages Using Template Literals
type Status = "success" | "error" | "loading";
type StatusMessage = `The operation is ${Status}.`;
const successMessage: StatusMessage = "The operation is success.";
const invalidMessage: StatusMessage = "The operation is pending.";
- Status is a union type representing possible operation statuses.
- StatusMessage constructs string patterns to describe the status of an operation.
- successMessage is valid because it matches the pattern, but invalidMessage throws an error as “pending” is not part of Status.
Output:
Type '"The operation is pending."' is not assignable to type 'StatusMessage'.Template Literal Types in TypeScript – FAQs
What are template literal types in TypeScript?
Template literal types allow the creation of new string literal types by combining existing string literal types using template literal syntax.
How do template literal types enhance type safety?
They enable developers to define and enforce specific string patterns at the type level, reducing errors related to incorrect string values.
Can template literal types be combined with union types?
Yes, combining them with union types allows for the generation of all possible string combinations, providing flexibility in type definitions.
Are there built-in string manipulation types in TypeScript?
Yes, TypeScript includes utility types like Uppercase, Lowercase, Capitalize, and Uncapitalize for transforming string literal types.
What are practical applications of template literal types?
They are useful for creating validation schemas, flexible APIs, and type-safe event emitters, ultimately improving code quality and reliability.
