0Pricing
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.

Key remapping & template literal types is a free TypeScript Academy lesson on CoddyKit — 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, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

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, and the TypeScript Academy course includes 3 lessons in total. 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.

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; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.

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