Creating new TypeScript types using template literal types

February 5, 2024
Saransh Kataria

TypeScript is way more powerful than I give it credit for. I recently learned about creating new TypeScript types using template literal types, and I was pretty surprised to know that TypeScript can do that.

Let us assume we wanted to create a type for the CSS properties margin and padding, which can have sub-attributes such as top, right, left, and bottom. Instead of recreating those, we can use template literal types to achieve this

type Attribute = "margin" | "padding";
type SubAttribute = "top" | "right" | "bottom" | "left";

type MergedProperty = `${Attribute}-${SubAttribute}`;

JavaScript

and this would result in a new merged property:

type MergedProperty = "margin-top" | "margin-right" | "margin-bottom" | "margin-left" | "padding-top" |"padding-right" | "padding-bottom" | "padding-left";

JavaScript

And this helps us in creating new TypeScript types using template literal types. Pretty cool, right?

Saransh Kataria

Born in Delhi, India, Saransh Kataria is the brain behind Wisdom Geek. Currently, Saransh is a software developer at a reputed firm in Austin, and he likes playing with new technologies to explore different possibilities. He holds an engineering degree in Computer Science. He also shares his passion for sharing knowledge as the community lead at Facebook Developer Circle Delhi, NCR which is a developer community in Delhi, India.