Mapped type with template literals in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a mapped type in TypeScript?

A mapped type creates a new type by transforming each property of an existing type. It loops over keys and applies changes, like making properties optional or readonly.

beginner

What are template literal types in TypeScript?

Template literal types let you create new string types by combining or transforming other string types, similar to string templates but at the type level.

intermediate

How do mapped types and template literal types work together?

You can use template literal types inside mapped types to create new property names by combining or modifying existing keys, like adding prefixes or suffixes.

intermediate

Example: What does this mapped type do?

type PrefixedKeys<T> = { [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K] }

It creates a new type where each property name is prefixed with 'get' and capitalized, and the value is a function returning the original property type.

beginner

Why use mapped types with template literals?

They help automate creating new types with modified keys, reducing repetitive code and improving type safety by generating consistent property names.

What does the 'as' keyword do in a mapped type with template literals?

A It filters keys from the original type

B It changes the value types

C It makes properties optional

D It renames the keys using the template literal expression

The 'as' keyword lets you rename keys in a mapped type, often using template literals to create new property names.

Which TypeScript feature allows creating new string types by combining other string types?

A Template literal types

B Union types

C Intersection types

D Enums

Template literal types let you build new string types by combining or transforming existing string types.

What does this mapped type produce?

type ReadonlyKeys<T> = { readonly [K in keyof T]: T[K] }

A A type with all properties readonly

B A type with all properties optional

C A type with keys renamed

D A type with function properties

This mapped type makes every property in T readonly by adding the readonly modifier.

In this example, what is the type of 'getName'?

type Person = { name: string };
type Getters = { [K in keyof Person as `get${Capitalize}`]: () => Person[K] };

A () => number

B () => string

C string

D number

'getName' is a function returning the original 'name' property type, which is string.

Why might you use mapped types with template literals in a real project?

A To improve runtime performance

B To write less code for loops

C To automatically create related property names and types, reducing manual errors

D To create CSS styles

Mapped types with template literals help generate consistent property names and types automatically, improving code safety and maintainability.

Explain how mapped types and template literal types can be combined to transform property names in TypeScript.

Think about how you can rename keys by adding text before or after the original key.

Describe a practical use case where mapped types with template literals improve your TypeScript code.

Consider how you might create functions for each property automatically.