Watched Property Names

Template literal types can build event names from property names.

watched.ts

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

type SettingKey = keyof Settings;
type SettingEvent = `${SettingKey}Changed`;

function formatEvent(event: SettingEvent, value: number): string {
    return `${event}=${value}`;
}

const key: SettingKey = ;
const settings: Settings = { width: 10, height: 6 };
const event: SettingEvent = `${key}Changed`;

console.log(formatEvent(event, settings[key]));

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

type SettingKey = keyof Settings;
type SettingEvent = `${SettingKey}Changed`;

function formatEvent(event: SettingEvent, value: number): string {
    return `${event}=${value}`;
}

const key: SettingKey = ;
const settings: Settings = { width: 10, height: 6 };
const event: SettingEvent = `${key}Changed`;

console.log(formatEvent(event, settings[key]));

property event Combining `keyof` with a template literal type keeps watched property names tied to the object shape.