Web Development

What Are Template Literal Types in TypeScript 4.1?

Recursive conditional types, JSX factories for React, and more features in the new TypeScript release

Photo by Colton Dean Marshall on Unsplash.

I’ve been working with TypeScript for years now and find it very simple to understand — especially as someone with a Java background. But after reading the news about TypeScript 4.1, the language’s latest big update, I was surprised by how much I didn’t know.

I don’t think that I’m an exception in my ignorance. After using the news as an opportunity to have a deeper understanding of how the type system really works, I want to share with you the exciting features and changes from the new version with an explanation of the keywords and a lot of demystifying examples.

If you’re sure you’ve got a solid grasp of all the language basics and you are eager to learn advanced functionality, then let’s get started.

New Language Features

Template Literal types

Introduced in ES6, Template Literals allow you to use backticks instead of single or double quotes when you work with strings:

const message = `text`;