如何实现泛型接口中handler参数类型匹配Data的dataKey属性类型？

你遇到的问题核心是：原接口只泛化了Data类型，但无法将dataKey的具体值与handler的参数类型做绑定。因为keyof Data是联合类型，TypeScript无法在单个Handler实例中确定dataKey对应的具体属性类型，导致Data[dataKey]无法被正确解析。

解决方案：增加属性键泛型参数 #

给Handler接口新增一个泛型参数K，用来捕获具体的属性键类型，这样就能通过Data[K]精准约束handler的参数类型：

interface Handler<Data extends object, K extends keyof Data> {
    dataKey: K;
    handler: (value: Data[K]) => void;
}

调整处理函数的泛型定义 #

对应的handleData函数也需要增加K泛型参数，以匹配Handler的类型约束：

function handleData<Data extends object, K extends keyof Data>(data: Data, handler: Handler<Data, K>) {
    const value = data[handler.dataKey];
    handler.handler(value); // 此处类型完全匹配，不会报错
}

使用示例 #

现在可以创建类型严格绑定的Handler实例，当dataKey变化时，handler的参数类型会自动同步：

interface Person {
    name: string;
    age: number;
}

const person: Person = { name: "Seppo", age: 56 };

// dataKey为"name"，handler参数自动推断为string
const nameHandler: Handler<Person, "name"> = {
    dataKey: "name",
    handler: (value) => {
        console.log("Name:", value.toUpperCase()); // 支持string类型的所有方法，类型安全
    }
};

// dataKey为"age"，handler参数自动推断为number
const ageHandler: Handler<Person, "age"> = {
    dataKey: "age",
    handler: (value) => {
        console.log("Age in 10 years:", value + 10); // 支持number类型的运算，类型安全
    }
};

handleData(person, nameHandler);
handleData(person, ageHandler);

简化类型推断（可选） #

如果不想手动指定K泛型参数，可以利用TypeScript的自动推断能力，比如用satisfies关键字或者封装创建函数：

方式1：使用satisfies自动推断

const autoHandler = {
    dataKey: "name" as const,
    handler: (value: string) => console.log("Name:", value)
} satisfies Handler<Person, keyof Person>;

handleData(person, autoHandler);

方式2：封装创建函数

function createHandler<Data extends object, K extends keyof Data>(
    dataKey: K,
    handler: (value: Data[K]) => void
): Handler<Data, K> {
    return { dataKey, handler };
}

// 自动推断K类型
const inferredNameHandler = createHandler("name", (value) => {
    console.log("Name:", value); // value自动为string类型
});

handleData(person, inferredNameHandler);

内容的提问来源于stack exchange，提问作者Jarzka