基于AxiosError的泛型类型创建报错咨询及修正方案

给定User接口：

export interface User {
  username: string;
  password: string;
}

期望API返回的errors结构为：

errors: {
   username: [string]
   password: [string]
}

当前编写的类型代码出现错误“Type 'T' is not assignable to type 'string | number | symbol'”，代码如下：

export type ClassError<T> = {
 [keys in T]: Array<string>;
}

export type PayloadError<T> = {
 errors: string | ClassError<T>;
}

问题原因 #

报错根源在于ClassError<T>中直接将泛型T用作索引签名类型，但TypeScript要求索引签名的类型必须是string | number | symbol，而你传入的是对象接口（比如User），不符合类型约束规则。

解决方案 #

方案一：约束泛型为合法键类型

调整ClassError的泛型约束，限定T只能是合法的键类型，同时在PayloadError中传入接口的键集合：

export type ClassError<T extends string | number | symbol> = {
  [keys in T]: Array<string>;
}

export type PayloadError<T> = {
  errors: string | ClassError<keyof T>;
}

使用示例：PayloadError<User>，此时keyof User会提取出"username" | "password"，作为ClassError的索引类型，符合TS规范。

方案二：直接针对目标接口定义错误类型

如果不需要泛型的通用性，可以直接基于User接口构建错误类型：

export type UserError = {
  [K in keyof User]: Array<string>;
}

export type PayloadError = {
  errors: string | UserError;
}

方案三：通用泛型写法（推荐）

让ClassError接收对象类型，自动提取其键作为索引：

export type ClassError<T extends object> = {
  [K in keyof T]: Array<string>;
}

export type PayloadError<T extends object> = {
  errors: string | ClassError<T>;
}

使用示例：PayloadError<User>，这种写法更直观，泛型T直接传入对象接口，TS会自动处理键的提取，完全符合类型规则。

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