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. 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.
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
- Mapped types with +/-readonly and +/-?
- Key remapping & template literal types
- String-pattern typing (route params, event names)