TypeScript泛型与函数参数约束错误解析求助

问题背景 #

想要实现一个可复用的分页逻辑函数（简化为普通函数），要求传入的getDataFn函数的入参必须包含page和pageSize属性，同时允许扩展其他过滤属性。但在实现中遇到两个困惑的类型错误：

interface MyParams {
    page: number;
    pageSize: number;
}
interface MyResponse {
    count: number;
    results: any[];
}

type Options<T extends MyParams, K extends MyResponse> = {
    getDataFn: (params: T) => Promise<K>;
    setData: (data: K) => void;
};

const elaborate = <T extends MyParams, K extends MyResponse>(
    options: Options<T, K>
) => {
    return options
        .getDataFn({ page: 0, pageSize: 100 }) // 错误：类型"{ page: number; pageSize: number; }"无法赋值给类型"T"
        .then((res) => options.setData(res));
};

elaborate<{}, MyResponse>({ // 预期错误：类型"{}"不满足"MyParams"约束
    getDataFn: (params) => Promise.resolve({ count: "0", results: [] }), // 未报错，不符合预期
    setData: () => {},
});

错误1：为什么{ page: 0, pageSize: 100 }无法传给T类型参数？ #

T extends MyParams仅表示T是MyParams的子类型，而非MyParams本身。T可以包含额外的必填属性，或者对已有属性有更严格的类型限制，例如：

type FilteredParams = MyParams & { keyword: string }; // 必须包含keyword属性

此时{ page: 0, pageSize: 100 }缺少keyword，完全无法赋值给FilteredParams。TypeScript的泛型约束只保证T至少拥有MyParams的属性，但不保证T的结构和MyParams完全一致，因此直接传入MyParams类型的对象会触发类型不匹配错误。

错误2：为什么返回count: "0"未触发类型错误？ #

这是因为第23行的elaborate<{}, MyResponse>已经违反了T extends MyParams的约束（{}缺少page和pageSize），TypeScript在检测到基础约束错误后，会暂停部分后续的类型检查，导致第24行的count类型不匹配问题未被报告。如果修正第23行的泛型参数（比如传入合法的T类型），第24行的字符串count会立即触发类型错误：

// 修正泛型参数后，第24行会报错：类型"string"无法赋值给类型"number"
elaborate<MyParams, MyResponse>({
    getDataFn: (params) => Promise.resolve({ count: "0", results: [] }),
    setData: () => {},
});

兼容扩展参数的最终实现 #

要让函数支持带扩展属性的分页参数，只需接收除page和pageSize外的其他参数，再与分页参数合并后传入getDataFn，确保参数结构完全符合T的要求：

interface MyParams {
    page: number;
    pageSize: number;
}

interface MyResponse {
    count: number;
    results: any[];
}

type Options<T extends MyParams, K extends MyResponse> = {
    getDataFn: (params: T) => Promise<K>;
    setData: (data: K) => void;
};

const elaborate = <T extends MyParams, K extends MyResponse>(
    options: Options<T, K>,
    otherParams: Omit<T, 'page' | 'pageSize'>
) => {
    return options
        .getDataFn({ page: 0, pageSize: 100, ...otherParams })
        .then((res) => options.setData(res));
};

// 使用示例
type MyAPIParams = {
    page: number;
    pageSize: number;
    query: string;
}

type MyAPIResponse = {
    count: number;
    results: {name: string, age: number}[];
    otherProperty: boolean;
}

const API = {
    GET_DATA: (params: MyAPIParams): Promise<MyAPIResponse> => 
        Promise.resolve({ count: 0, results: [], otherProperty: true})
}

elaborate<MyAPIParams, MyAPIResponse>({
    getDataFn: API.GET_DATA,
    setData: (data) => { console.log(data.results, data.otherProperty) },
}, {query: 'test'});

这种实现既保证了分页参数的通用性，又兼容了不同API的扩展过滤属性，完全符合类型约束要求。

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