如何用TypeScript根据属性键推断类型，生成泛型Settable结构？

给定以下类型定义：

type Person = {
    name: string;
    age: number;
}

type Settable<Value> = {
    value: Value;
    setValue: (value: Value) => void;
}

我们需要程序化、通用地生成如下类型，而非手动逐个定义：

type SettablePerson = {
    name: Settable<string>;
    age: Settable<number>;
}

之前尝试用Record工具类型时，会导致所有Settable的类型参数变为unknown，无法匹配原对象属性的具体类型：

type SettablePerson = Record<keyof Person, Settable<unknown>>;

解决方案：使用TypeScript映射类型 #

通过映射类型可以遍历原对象的每个属性，为每个属性单独生成对应的Settable包装类型：

// 定义通用的转换类型
type SettableObject<T> = {
    [K in keyof T]: Settable<T[K]>;
};

// 生成目标类型
type SettablePerson = SettableObject<Person>;

代码验证 #

此时你提供的示例代码可以完全通过类型检查：

let personName: string = 'john';
let personAge: number = 20;

const settablePerson: SettablePerson = {
    name: {
        value: personName,
        setValue: (value: string) => personName = value
    },
    age: {
        value: personAge,
        setValue: (value: number) => personAge = value
    },
}

原理说明 #

• [K in keyof T]：遍历泛型参数T的所有属性键
• Settable<T[K]>：将当前属性的类型T[K]传入Settable泛型，生成对应类型的包装结构

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