6
Creating new TypeScript types using template literal types
source link: https://www.wisdomgeek.com/development/web-development/typescript/creating-new-typescript-types-using-template-literal-types/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Creating new TypeScript types using template literal types
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}`;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";
And this helps us in creating new TypeScript types using template literal types. Pretty cool, right?
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK