Template Literal Types

Question 1

What are Template Literal Types in TypeScript?

Answer 1

Template literal types build on string literal types, and have the ability to expand into many strings via unions.

They have the same syntax as template literal strings in JavaScript, but are used in type positions. When used with concrete literal types, a template literal produces a new string literal type by concatenating the contents.

type World = "world";
 
type Greeting = `hello ${World}`; // type Greeting = "hello world"

“Documentation - Template Literal Types” (typescriptlang.org). Retrieved April 11, 2023.

Question 2

How do you concatenate string literal types in TypeScript?

Answer 2

You can concatenate string literal types by using backticks (`) and the ${} syntax, e.g:

type World = 'world’;
type Greeting = `hello ${World}`; 
// type Greeting = "hello world"

“Documentation - Template Literal Types” (typescriptlang.org). Retrieved April 11, 2023.

Question 3

What are type substitutions in Template Literal Types?

Answer 3

Type substitutions are placeholders in a template literal type that can be replaced with another type. They are denoted by the ${Type} syntax within backticks.

“Documentation - Template Literal Types” (typescriptlang.org). Retrieved April 11, 2023.

Question 4

Provide an example of a Template Literal Type in TypeScript

Answer 4

type EmailLocaleIDs = "welcome_email" | "email_heading";
type FooterLocaleIDs = "footer_title" | "footer_sendoff";
 
type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`;
          
// type AllLocaleIDs = "welcome_email_id" | "email_heading_id" | "footer_title_id" | "footer_sendoff_id"

“Documentation - Template Literal Types” (typescriptlang.org). Retrieved April 11, 2023.

Question 5

Given the following code:

type PropEventSource<Type> = {
    on(eventName: `${string & keyof Type}Changed`, callback: (newValue: Type[Key]) => void): void;
};

function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>;

const person = makeWatchedObject({
  firstName: "Saoirse",
  lastName: "Ronan",
  age: 26
});

List all accepted types we can pass as the first argument (eventName) to person.on function

Answer 5

"firstNameChanged" | "lastNameChanged" | "ageChanged"

Question 6

List all Intrinsic string manipulation Types

Answer 6

• Uppercase<StringType> - Converts each character in the string to the uppercase version.
• Lowercase<StringType> - Converts each character in the string to the lowercase equivalent.
• Capitalize<StringType> - Converts the first character in the string to an uppercase equivalent.
• Uncapitalize<StringType> - Converts the first character in the string to a lowercase equivalent.

Example:

type Greeting = "Hello, world"
type ShoutyGreeting = Uppercase<Greeting> 
// type ShoutyGreeting = "HELLO, WORLD"
type QuietGreeting = Lowercase<Greeting> 
// type QuietGreeting = "hello, world"
type Greeting = Capitalize<QuietGreeting>; 
// type Greeting = "Hello, world"
type UncomfortableGreeting = Uncapitalize<ShoutyGreeting>; 
// type UncomfortableGreeting = "hELLO WORLD"

“Intrinsic String Manipulation Types” (typescriptlang.org). Retrieved April 13, 2023.