TypeScript泛型函数getResults返回类型适配问题：如何使其返回正确的具体类型？

The issue here is that TypeScript can't properly infer the element type of the result array because the original generic parameters don't create a clear link between the function's return type and the desired output type. Let's fix this with two straightforward solutions:

Solution 1: Explicitly Infer the Element Type #

We can simplify the generics of getResults to directly capture the element type U from the response's result array. This makes TypeScript's inference process clear and direct:

interface IResponse<T> { result: T; }
type FnType<P, R> = (params: P) => R;
const r1: IResponse<string[]> = { result: ['123'] };
const r2: IResponse<number[]> = { result: [456] };

// Updated getResults with explicit element type generic U
const getResults = <U, P>(fn: FnType<P, IResponse<U[]>>, params: P): U[] => {
  return [ ...fn(params).result, ...fn(params).result ];
};

const getValue = <T>(r: IResponse<T>) => r;

// Now correctly returns string[]
const stringResults = getResults(getValue, r1);
// Now correctly returns number[]
const numberResults = getResults(getValue, r2);

Why this works: #

By defining fn as returning IResponse<U[]>, we tell TypeScript to infer U based on the actual response type passed in. When you pass r1 (which is IResponse<string[]>), TypeScript automatically deduces U as string, so the return type becomes string[].

Solution 2: Flexible Indexed Access for Subtypes #

If your production code might use functions that return subtypes of IResponse, this solution uses indexed access to extract the element type from the response's result array, making it more flexible:

interface IResponse<T> { result: T; }
type FnType<P, R> = (params: P) => R;
const r1: IResponse<string[]> = { result: ['123'] };
const r2: IResponse<number[]> = { result: [456] };

// Use indexed access to get the element type of the result array
const getResults = <R extends IResponse<unknown[]>, P>(fn: FnType<P, R>, params: P): R['result'][number][] => {
  return [ ...fn(params).result, ...fn(params).result ];
};

const getValue = <T>(r: IResponse<T>) => r;

// Inferred as string[]
const stringResults = getResults(getValue, r1);
// Inferred as number[]
const numberResults = getResults(getValue, r2);

Why this works: #

R['result'][number] extracts the element type of the result array from the inferred response type R. For r1, R is IResponse<string[]>, so R['result'][number] resolves to string, giving us the correct return type.

Both solutions will correctly infer the return type based on the input parameters, eliminating the unknown[] issue. Choose the first if you're working strictly with IResponse, and the second if you need support for subtypes.

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