Mapped type with template literals in Typescript

Introduction

Mapped types with template literals let you create new object types by changing keys using string patterns. This helps make your code flexible and reusable.

When you want to create a new object type by adding prefixes or suffixes to existing keys.

When you need to transform all keys of an object type to a different naming style.

When you want to generate types for related properties automatically, like 'get' or 'set' methods.

When you want to enforce consistent naming patterns across object keys.

When you want to avoid repeating similar type definitions with slight key changes.

Syntax

Typescript

type NewType<T> = {
  [K in keyof T as `prefix_${string & K}_suffix`]: T[K]
};

The as keyword lets you rename keys using template literal strings.

Use string & K to ensure the key is treated as a string for template literals.

Examples

This creates a new type where keys are prefixed with 'get_'. For example, 'name' becomes 'get_name'.

Typescript

type User = {
  name: string;
  age: number;
};

type PrefixedUser = {
  [K in keyof User as `get_${string & K}`]: User[K];
};

This adds '_flag' suffix to each key, like 'isActive_flag'.

Typescript

type Flags = {
  isActive: boolean;
  isAdmin: boolean;
};

type SuffixFlags = {
  [K in keyof Flags as `${string & K}_flag`]: Flags[K];
};

This converts all keys to uppercase using the built-in Uppercase utility type.

Typescript

type Options = {
  debug: boolean;
  verbose: boolean;
};

type UppercaseOptions = {
  [K in keyof Options as Uppercase<string & K>]: Options[K];
};

Sample Program

This program creates a new type where each key from Person is renamed with a 'readonly_' prefix and made readonly. Then it creates an object of that type and prints it.

Typescript

type Person = {
  firstName: string;
  lastName: string;
  age: number;
};

type ReadonlyPerson = {
  readonly [K in keyof Person as `readonly_${string & K}`]: Person[K];
};

const person: ReadonlyPerson = {
  readonly_firstName: "Alice",
  readonly_lastName: "Smith",
  readonly_age: 30
};

console.log(person);

Important Notes

Mapped types with template literals only work with keys that can be converted to strings.

You can combine this with modifiers like readonly or ? (optional) for more control.

Template literal types are powerful for creating dynamic and descriptive keys in types.

Summary

Mapped types with template literals let you rename keys dynamically in object types.

This helps create flexible and reusable type patterns without repeating code.

Use as with template literals and string & K to transform keys safely.