{
    "slug": "typescript_mapped_types",
    "term": "Mapped Types & Template Literal Types",
    "category": "typescript",
    "difficulty": "advanced",
    "short": "Mapped types transform existing types by iterating over their keys. Template literal types create string union types from combinations — together they enable powerful type-level transformations.",
    "long": "Mapped types: { [K in keyof T]: NewType } — iterate over all keys of T and transform their value types. Used to build Partial, Readonly, Required, and Record. Modifiers: +/- to add/remove optional (?) and readonly. Template literal types: `${Prefix}${string}` — create string union types by combining other string types. Applications: EventName as `on${Capitalize<Event>}`, getter names as `get${Capitalize<K>}`, CSS property names. Combined: transform an object type's method names into event handler names automatically.",
    "aliases": [
        "mapped types",
        "template literal types",
        "TypeScript type transformation"
    ],
    "tags": [
        "typescript",
        "advanced",
        "types"
    ],
    "misconception": "Mapped types are only for utility types like Partial — mapped types can transform any aspect of a type: rename keys, change value types, filter keys by constraint, and generate derivative types.",
    "why_it_matters": "Without mapped types, you manually maintain parallel type definitions that drift apart — mapped types derive one type from another, ensuring they always stay in sync.",
    "common_mistakes": [
        "Forgetting -? to remove optionality in mapped types — Required<T> needs -? modifier.",
        "Not using as clause for key remapping — available in TS 4.1+ for key transformation.",
        "Template literal types on non-string unions — only string literal unions work.",
        "Over-engineering with complex mapped types when a simpler type works."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "typescript_conditional_types",
        "typescript_generics",
        "typescript_utility_types"
    ],
    "prerequisites": [
        "typescript_generics",
        "typescript_interfaces_types",
        "typescript_conditional_types"
    ],
    "refs": [
        "https://www.typescriptlang.org/docs/handbook/2/mapped-types.html"
    ],
    "bad_code": "// Manually maintained parallel types — drift risk:\ntype User = { name: string; email: string; age: number; };\n// Must update this manually every time User changes:\ntype UserGetters = {\n    getName: () => string;\n    getEmail: () => string;\n    getAge: () => number;\n};",
    "good_code": "// Mapped type derives UserGetters automatically:\ntype User = { name: string; email: string; age: number; };\n\ntype Getters<T> = {\n    [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];\n};\n\ntype UserGetters = Getters<User>;\n// Equivalent to:\n// { getName: () => string; getEmail: () => string; getAge: () => number; }\n\n// Template literal type for event names:\ntype EventName = 'click' | 'focus' | 'blur';\ntype Handler = `on${Capitalize<EventName>}`;  // 'onClick' | 'onFocus' | 'onBlur'",
    "quick_fix": "Use Partial<T>, Required<T>, Readonly<T>, Record<K,V>, Pick<T,K>, and Omit<T,K> from TypeScript's built-in utility types before writing your own mapped types",
    "severity": "low",
    "effort": "medium",
    "created": "2026-03-16",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/typescript_mapped_types",
        "html_url": "https://codeclaritylab.com/glossary/typescript_mapped_types",
        "json_url": "https://codeclaritylab.com/glossary/typescript_mapped_types.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Mapped Types & Template Literal Types](https://codeclaritylab.com/glossary/typescript_mapped_types) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/typescript_mapped_types"
            }
        }
    }
}