如何编写泛型接口方法以解决TS2322类型不兼容错误

问题背景 #

需要实现一个接口内的泛型方法（无需将整个接口声明为泛型），类型参数T约束为Record<string, string>或其子接口。现有代码出现TS2322错误，核心原因是TypeScript无法确保Record<string, string>[]可以安全赋值给T[]——因为T可能被实例化为约束类型的不同子类型（比如带有额外属性的自定义接口）。目标是用泛型调用替代类型断言，提升代码可读性与IDE智能提示体验。

错误代码回顾 #

interface IFoo {
    source: <T extends Record<string, string>>(table: string, calcEngine?: string, tab?: string, predicate?: (row: T) => boolean) => Array<T>;
}

const getFooRows = function <T extends Record<string, string>>(table: string, calcEngine?: string, tab?: string) {
    var row1: Record<string, string> = {};
    var row2: Record<string, string> = {};
    return [row1, row2] as Array<T>;
}

const bar: IFoo = {
    source(table, calcEngine, tab, predicate) {
        return predicate
            ? getFooRows(table, calcEngine, tab).filter(r => predicate!(r))
            : getFooRows(table, calcEngine, tab);
    }
}

解决方案 #

核心调整两点：

1. 给bar.source显式声明泛型参数，确保调用getFooRows时传递正确的T类型
2. 在getFooRows中直接将单个元素断言为T（而非整个数组），更贴合实际场景中数据结构匹配的前提

修改后的代码：

interface IFoo {
    source: <T extends Record<string, string>>(table: string, calcEngine?: string, tab?: string, predicate?: (row: T) => boolean) => Array<T>;
}

const getFooRows = function <T extends Record<string, string>>(table: string, calcEngine?: string, tab?: string): T[] {
    // 基于业务前提：实际返回的表数据结构与调用时指定的T匹配，因此断言安全
    const row1 = {} as T;
    const row2 = {} as T;
    return [row1, row2];
}

const bar: IFoo = {
    // 显式声明泛型参数T，对齐接口定义
    source<T extends Record<string, string>>(table, calcEngine, tab, predicate) {
        const rows = getFooRows<T>(table, calcEngine, tab);
        // 直接用predicate过滤，类型自动推导为T[]
        return predicate ? rows.filter(predicate) : rows;
    }
}

验证期望调用效果 #

以下代码可正常运行，且IDE会提供正确的智能提示：

interface ICustomRow extends Record<string, string> {
    customProp1: string;
    customProp2: string;
}

// 自动推导为Record<string, string>[]
const genericRows = bar.source("genericTable");
genericRows.forEach( r => {
    console.log(`${r["dynamicProp1"]} ${r["dynamicProp2"]}`);
});

// 指定泛型后得到ICustomRow[]，支持自定义属性的智能提示
const customRows = bar.source<ICustomRow>("customTable");
customRows.forEach( r => {
    console.log(`${r.customProp1} ${r.customProp2}`);
});

关键说明 #

• 由于你明确知道调用时指定的T与对应表的数据结构完全匹配，因此使用as T的类型断言是安全的，避免了TypeScript的严格类型检查限制
• 显式声明泛型参数后，TypeScript可以正确推导所有环节的类型，确保返回值与接口定义一致，同时保留了泛型调用的便利性

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