TypeScript Academy · Lesson

Key remapping & template literal types

Remap keys with “as”, build keys via template literals (Capitalize/Uncapitalize), and filter properties by name patterns.

Lesson 2 of 38 steps

Key remapping & template literal types is a free TypeScript Academy lesson on CoddyKit. This is lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The TypeScript Academy course includes 3 lessons in total.

Intro

Goal: Use key remapping (the as clause) with template literal types to rename, generate, or drop properties by name patterns.

  • Rename keys: K as NewK
  • Filter keys with never
  • Compose names: `get${Capitalize<K>}`

Rename keys

Rename keys with as. Example: Convert snake_case names to camelCasee.

type Original = { first_name: string; last_name: string }

type Camelize<T> = {
  [K in keyof T as K extends `${infer A}_${infer B}`
    ? `${A}${Capitalize<B>}`
    : K]: T[K]
}

type UserCamel = Camelize<Original>  // { firstName: string; lastName: string }

Filter by prefix

Drops the never key. Template: Filter event handlers with `on${string}`.

type Props = { onClick: () => void; onSubmit: () => void; title: string }

type WithoutHandlers<T> = {
  [K in keyof T as K extends `on${string}` ? never : K]: T[K]
}

type Clean = WithoutHandlers<Props>  // { title: string }

Generate methods

Generate API surfaces with template names: The get${Capitalize<K>} pattern is used to create getters from fields.

type Fields = "name" | "email"

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

type ClientAPI = Getters<Fields>
// { getName: () => string; getEmail: () => string }

Compose patterns

Combine multiple templates to generate strong names, ensuring consistent naming across large projects.

type Route = `/${"" | `${string}`}`

type HttpMethod = "get" | "post"

type Endpoints<T extends string, M extends string> = {
  [K in T as `${M}_${K}`]: { path: `/${K}`; method: Uppercase<M> }
}

type API = Endpoints<"users" | "login", HttpMethod>
// { get_users: { path: "/users"; method: "GET" }, post_login: { path: "/login"; method: "POST" } }

Tips & gotchas

Tips:

Remapping is costly; split complex types with aliases.

Simple templates for filters: `on${string}`, `data-${string}`.

Use Capitalize/Uncapitalize/Uppercase/Lowercase helpers.

Simplify the API if name generation becomes excessive.

Filter prefix check

Quick check: Which mapped type pattern removes properties starting with on?

Recap

Recap: Rename/filter with key remapping; generate keys with template literal types; drop unwanted ones with never.

Free to start

Learn TypeScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
101
Lessons
352

Frequently Asked Questions

Is the “Key remapping & template literal types” lesson free?

Yes — the full text of “Key remapping & template literal types” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO. The TypeScript Academy course includes 3 lessons in total.

What will I learn in “Key remapping & template literal types”?

Remap keys with “as”, build keys via template literals (Capitalize/Uncapitalize), and filter properties by name patterns. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 3.

How long does the “Key remapping & template literal types” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Mapped types with +/-readonly and +/-?
  2. Key remapping & template literal types
  3. String-pattern typing (route params, event names)
← Back to TypeScript Academy