Mapped Types

Remapped Event Keys

Mapped types can rename keys while building a related object shape.

key remapping The `as` clause in a mapped type can produce new property names from old keys.

Remapped Event Keys

eventKey
remapped_events.ts
Replay: real traced execution (multi-file project)
type Model = {
    width: number;
    height: number;
};

type ChangeEvents<T> = {
    [K in keyof T as `${string & K}Changed`]: T[K];
};

function summarizeEvent(events: ChangeEvents<Model>, key: keyof ChangeEvents<Model>): string {
    return `${key}:${events[key]}`;
}

const eventKey: keyof ChangeEvents<Model> = "widthChanged";
const events: ChangeEvents<Model> = {
    widthChanged: 10,
    heightChanged: 6,
};

console.log(summarizeEvent(events, eventKey));

type Model = {
    width: number;
    height: number;
};

type ChangeEvents<T> = {
    [K in keyof T as `${string & K}Changed`]: T[K];
};

function summarizeEvent(events: ChangeEvents<Model>, key: keyof ChangeEvents<Model>): string {
    return `${key}:${events[key]}`;
}

const eventKey: keyof ChangeEvents<Model> = "heightChanged";
const events: ChangeEvents<Model> = {
    widthChanged: 10,
    heightChanged: 6,
};

console.log(summarizeEvent(events, eventKey));

  1. eventKey ← widthChanged, events ← [object Object]

    11    return `${key}:${events[key]}`;12}1314const eventKey→ widthChanged: keyof ChangeEvents<Model> = "widthChanged";  //@eventKey="heightChanged"15const events→ [object Object]: ChangeEvents<Model> = {16    widthChanged: 10,17    heightChanged: 6,18};1920console.log(summarizeEvent(events[object Object], eventKeywidthChanged));

  2. function summarizeEvent(events: ChangeEvents<Model>, key: keyof Change…

    7    [K in keyof T as `${string & K}Changed`]: T[K];8};910function summarizeEvent(events[object Object]: ChangeEvents<Model>, keywidthChanged: keyof ChangeEvents<Model>): string {11    return `${keywidthChanged}:${events[key]10}`;12}

  3. console.log(summarizeEvent(events, eventKey));

    17    heightChanged: 6,18};1920console.log(summarizeEvent(events[object Object], eventKeywidthChanged));
    outputwidthChanged:10

  1. eventKey ← heightChanged, events ← [object Object]

    11    return `${key}:${events[key]}`;12}1314const eventKey→ heightChanged: keyof ChangeEvents<Model> = "heightChanged";15const events→ [object Object]: ChangeEvents<Model> = {16    widthChanged: 10,17    heightChanged: 6,18};1920console.log(summarizeEvent(events[object Object], eventKeyheightChanged));

  2. function summarizeEvent(events: ChangeEvents<Model>, key: keyof Change…

    7    [K in keyof T as `${string & K}Changed`]: T[K];8};910function summarizeEvent(events[object Object]: ChangeEvents<Model>, keyheightChanged: keyof ChangeEvents<Model>): string {11    return `${keyheightChanged}:${events[key]6}`;12}

  3. console.log(summarizeEvent(events, eventKey));

    17    heightChanged: 6,18};1920console.log(summarizeEvent(events[object Object], eventKeyheightChanged));
    outputheightChanged:6