TypeScript中Record类型数组是否需键名一致？接口赋值报错排查

问题场景 #

定义的TypeScript接口 #

export interface userInfo {
    bio: {
        name: string;
    },
    responses: Record<string, Response>;
}

export interface Response {
    answer: string;
    level: number;
}

export interface userInformation {
    information: userInfo[];
}

模拟数据代码 #

mockUserInfo() {
    return [
        {
            information: [
                {
                    bio: {
                        name: 'john',
                    },
                    responses: {
                        favoriteColor: {
                            answer: 'green',
                            level: 5
                        },
                        favoriteFood: {
                            answer: 'pasta',
                            level: 5
                        }
                    }
                },
                {
                    bio: {
                        name: 'jane',
                    },
                    responses: {
                        favoriteColor: {
                            answer: 'white',
                            level: 5
                        },
                        favoriteFood: {
                            answer: 'Fish',
                            level: 5
                        },
                        favoriteCar: {
                            answer: 'Ford',
                            level: 5
                        }
                    }
                }
            ]
        }
    ]
}

getUserInfo(): Observable<userInformation[]> {
    return new Observable((subscriber) => {
        setTimeout(() => {
            subscriber.next(this.mockUserInfo());
            subscriber.complete();
        }, 100);
    });
}

报错信息 #

Argument of type '{ information: ({ bio: { name: string; }; responses: { favoriteColor: { answer: string; level: number; }; favoriteFood: { answer: string; level: number; }; favoriteCar?: undefined; }; } | { bio: { name: string; }; responses: { ...; }; })[]; }[]' is not assignable to parameter of type 'userInformation[]'.
Type '{ information: ({ bio: { name: string; }; responses: { favoriteColor: { answer: string; level: number; }; favoriteFood: { answer: string; level: number; }; favoriteCar?: undefined; }; } | { bio: { name: string; }; responses: { ...; }; })[]; }' is not assignable to type 'userInformation'.
Types of property 'information' are incompatible.
Type '({ bio: { name: string; }; responses: { favoriteColor: { answer: string; level: number; }; favoriteFood: { answer: string; level: number; }; favoriteCar?: undefined; }; } | { bio: { name: string; }; responses: { ...; }; })[]' is not assignable to type 'userInfo[]'.
Type '{ bio: { name: string; }; responses: { favoriteColor: { answer: string; level: number; }; favoriteFood: { answer: string; level: number; }; favoriteCar?: undefined; }; } | { bio: { name: string; }; responses: { ...; }; }' is not assignable to type 'userInfo'.

用户疑问：当为第二个元素添加“favoriteCar”键时就会报错，若两个元素的键名完全一致则无错误。这是否意味着Record类型的数组要求所有元素的键名必须一致？

问题解析与解决方案 #

核心原因 #

Record<string, Response>并不要求数组中所有元素的键名一致，报错是TypeScript自动类型推断的问题：
当你没有给mockUserInfo()指定返回类型时，TypeScript会把两个responses对象推断成固定键的对象类型的联合（一个只有favoriteColor和favoriteFood，另一个多了favoriteCar）。这个联合类型无法赋值给Record<string, Response>，因为Record允许任意字符串键对应Response，但联合类型里的每个成员仅允许特定的键，两者类型不兼容。

解决方案 #

方案1：给mockUserInfo显式指定返回类型

直接告诉TypeScript函数返回的是userInformation[]类型，让它按照接口定义校验：

mockUserInfo(): userInformation[] {
    return [
        {
            information: [
                {
                    bio: { name: 'john' },
                    responses: {
                        favoriteColor: { answer: 'green', level: 5 },
                        favoriteFood: { answer: 'pasta', level: 5 }
                    }
                },
                {
                    bio: { name: 'jane' },
                    responses: {
                        favoriteColor: { answer: 'white', level: 5 },
                        favoriteFood: { answer: 'Fish', level: 5 },
                        favoriteCar: { answer: 'Ford', level: 5 }
                    }
                }
            ]
        }
    ];
}

方案2：给单个userInfo对象做类型断言

在每个information数组的元素后添加as userInfo，明确指定该对象符合userInfo接口：

mockUserInfo() {
    return [
        {
            information: [
                {
                    bio: { name: 'john' },
                    responses: {
                        favoriteColor: { answer: 'green', level: 5 },
                        favoriteFood: { answer: 'pasta', level: 5 }
                    }
                } as userInfo,
                {
                    bio: { name: 'jane' },
                    responses: {
                        favoriteColor: { answer: 'white', level: 5 },
                        favoriteFood: { answer: 'Fish', level: 5 },
                        favoriteCar: { answer: 'Ford', level: 5 }
                    }
                } as userInfo
            ]
        }
    ];
}

方案3：修改接口类型定义（可选）

将responses的类型替换为等价的{ [key: string]: Response }，有时候能帮助TypeScript更好地识别动态键：

export interface userInfo {
    bio: { name: string };
    responses: { [key: string]: Response };
}

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