Skip to content

Template Literal Types in TypeScript

type Color = "red" | "green" | "blue";
type Size = "sm" | "md" | "lg";
// Combine literals
type ColorSize = `${Color}-${Size}`;
// "red-sm" | "red-md" | "red-lg" | "green-sm" | ...
type EventName = `on${Capitalize<string>}`;
// Matches onChange, onClick, onSubmit, etc.
type Greeting = Lowercase<"HELLO">; // "hello"
type Shout = Uppercase<"hello">; // "HELLO"
type Title = Capitalize<"hello">; // "Hello"
type Uncap = Uncapitalize<"Hello">; // "hello"
type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
interface User { name: string; age: number; }
type UserGetters = Getters<User>;
// { getName: () => string; getAge: () => number }

Easy: What are template literal types?

Medium: How do Capitalize, Uppercase, and Lowercase work?

Hard: How would you create a type that converts object keys to getter names?