TypeScript：如何声明记录或记录数组的类型？

Question

Suppose there's an apiCall function which returns a promise that resolves as an object that has a data property, which can be either a Record or an array of Record s (like Axios). I'm trying to declare the types appropriately, but I'm getting an error.

Here's how I declare my types:

type ApiResponseType = {
    data: Record<string, any>[] | Record<string, any>;
};

function apiCall(asArr: boolean): Promise<ApiResponseType> {
    const d = {
        foo: 'bar',
    };
    return Promise.resolve({
        data: asArr ? [d] : d,
    });
}

But when I use it like so:

(async()=>{
    let a: {[key: string]: any} | null = null;
    let b: {[key: string]: any}[] | null = null;
    a = (await apiCall(false)).data;
    b = (await apiCall(true)).data; // Type 'Record<string, any> | Record<string, any>[]' is not assignable to type '{[key: string]: any;}[] | null'. Type 'Record<string, any>' is missing the following properties from type '{[key: string]: any;}[]': length, pop, push, concat, and 26 more.
    console.log({a, b});
})();

I get the following error:

Type 'Record<string, any> | Record<string, any>[]' is not assignable to type '{[key: string]: any;}[] | null'. Type 'Record<string, any>' is missing the following properties from type '{[key: string]: any;}[]': length, pop, push, concat, and 26 more.

I think it may have something to do with the array being treated as a Record<string, any>

Answer 1

This is because:

declare var a: Record<string, any>[]
declare var b: Record<string, any>

a = b // error
b = a // ok

Array of Records is assignable to Record but not vice - versa.

But let's go back to your example:

type Data = Record<string, any>[] | Record<string, any>;
type Nullable<T> = T | null

type ApiResponseType<T extends Data> = {
    data: T
};

function apiCall(asArr: true): Promise<ApiResponseType<Record<string, any>[]>>
function apiCall(asArr: false): Promise<ApiResponseType<Record<string, any>>>
function apiCall(asArr: boolean) {
    const d = {
        foo: 'bar',
    };
    return Promise.resolve<ApiResponseType<Data>>({
        data: asArr ? [d] : d,
    });
}
type O = ReturnType<typeof apiCall>

(async () => {
    let a: Nullable<Record<string, any>> = null;
    let b: Nullable<Record<string, any>[]> = null;
    a = (await apiCall(false)).data;
    b = (await apiCall(true)).data;

    // without LET bindings
    {
        const a = (await apiCall(false)).data; // Record<string, any>
        const b = (await apiCall(true)).data; //Record<string, any>[]
    }

})();

With help of overloadings, we can give some hint to compiler.

Please see this section: // without LET bindings

Compiler is able to figure out ReturnType of function