TypeScript：如何类型安全地为对象动态添加指定名称的属性

问题背景 #

我有一个函数appendImageUrl，可基于fileProperty参数为对象添加固定属性imageUrl：

public async appendImageUrl<T>(
    value: T,
    fileProperty: keyof T,
): Promise<{ imageUrl: string } & T> {
    const imageUrl = ...
    return {
        ...value,
        imageUrl,
    };
}

示例：调用appendImageUrl({a: '...', imageId: '...'})会返回{a: '...', imageId: '...', imageUrl: '...'}。

现在希望能动态指定目标属性名（原固定为imageUrl），尝试编写了如下函数：

public async appendPresignedUrl<T, K extends keyof R, R extends T & Record<K, string>>(
    value: T,
    fileProperty: keyof T,
    targetProperty: K,
): Promise<R> {
    const presignedUrl = ...
   
    return {
        ...value,
        [targetProperty]: presignedUrl,
    };
}

但出现了如下类型错误：

类型“T & { [x: string]: string; }”无法分配给类型“R”。
“R”可被实例化为与“T & { [x: string]: string; }”无关的任意类型。ts(2322)

错误原因 #

你的泛型参数定义存在循环依赖：K extends keyof R与R extends T & Record<K, string>互相约束，导致TypeScript无法确定R的具体类型——R可以是任何满足T & Record<K, string>的类型，但你返回的只是T加上目标属性的基础组合对象，无法匹配任意的R类型，因此抛出类型不兼容错误。

解决方案 #

方案1：简化泛型定义（推荐）

去掉多余的R泛型，直接将返回类型明确为T & Record<K, string>，同时约束K为合法的属性键类型：

public async appendPresignedUrl<T, K extends PropertyKey>(
    value: T,
    fileProperty: keyof T,
    targetProperty: K,
): Promise<T & Record<K, string>> {
    const presignedUrl = ... // 你的URL生成逻辑
   
    return {
        ...value,
        [targetProperty]: presignedUrl,
    } as T & Record<K, string>;
}

如果想避免覆盖value中已有的属性，可以进一步约束K为value中不存在的键：

public async appendPresignedUrl<T, K extends Exclude<PropertyKey, keyof T>>(
    value: T,
    fileProperty: keyof T,
    targetProperty: K,
): Promise<T & Record<K, string>> {
    const presignedUrl = ...
   
    return {
        ...value,
        [targetProperty]: presignedUrl,
    } as T & Record<K, string>;
}

调用示例：

// 返回类型自动推断为：{a: string, imageId: string} & {presignedUrl: string}
appendPresignedUrl({a: '...', imageId: '...'}, 'imageId', 'presignedUrl');

方案2：保留R泛型（灵活扩展）

如果需要支持手动指定更具体的返回类型R，可以调整泛型参数顺序并设置默认值：

public async appendPresignedUrl<T, K extends PropertyKey, R extends T & Record<K, string> = T & Record<K, string>>(
    value: T,
    fileProperty: keyof T,
    targetProperty: K,
): Promise<R> {
    const presignedUrl = ...
   
    return {
        ...value,
        [targetProperty]: presignedUrl,
    } as R;
}

这种写法既支持自动推断默认返回类型，也允许手动传入符合约束的R类型。

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