如何为泛型类型对象重指定类型？TypeScript类型转换问题

我有一个调用多接口的服务，为此定义了一个极度泛型的响应类型：

export interface ApiResponseItem {
  [ index: string ]: string | number | boolean | ApiResponseItem | Array<string | number | boolean>
}

export interface Item {
  attributes?: ApiResponseItem,
  // ...其他属性
}

接口返回的响应示例如下：

{
  things: [ { id: 123, actions: [ { name: 'foo' }, { name: 'bar' } ] } ]
}

后续在类中需要处理特定类型的数据时，希望对象能拥有正确的类型：

interface Action {
  name: string
}

export class SomeClass {
  actions: Action[];

  constructor (item: Item) {
    this.actions = item.attributes.actions;
  }
}

此时会出现TypeScript错误：

error TS2322: Type '(string | number | boolean)[]' is not assignable to type 'Action[]'.
  Type 'string | number | boolean' is not assignable to type 'Action'.
    Type 'string' is not assignable to type 'Action'.

目前我只能通过双重类型断言解决：

this.actions = item.attributes.actions as unknown as Action[]

如何无需使用unknown和Action[]双重断言来实现类型转换？

解决方案 #

1. 泛型改造：让类型定义更精确 #

从根源上优化类型定义，给ApiResponseItem和Item添加泛型参数，处理特定接口时指定具体类型，避免模糊的泛型匹配：

// 泛型版ApiResponseItem，支持指定嵌套数组的元素类型
export interface ApiResponseItem<T = unknown> {
  [index: string]: string | number | boolean | ApiResponseItem | Array<T>
}

// 泛型版Item，绑定attributes的具体类型
export interface Item<T extends ApiResponseItem = ApiResponseItem> {
  attributes?: T,
  // ...其他属性
}

interface Action {
  name: string
}

// 定义对应响应的精确属性类型
interface ThingAttributes extends ApiResponseItem<Action> {
  actions: Action[]
}

export class SomeClass {
  actions: Action[];

  // 传入指定泛型的Item，TypeScript自动识别类型
  constructor(item: Item<ThingAttributes>) {
    this.actions = item.attributes?.actions || [];
  }
}

这种方式让类型在定义阶段就完全匹配，不需要任何断言，是最规范的解决方案。

2. 类型守卫：运行时校验+类型推导 #

如果无法修改原有泛型定义，可以通过类型守卫函数在运行时验证数据结构，让TypeScript自动推导正确类型：

interface Action {
  name: string
}

// 定义Action数组的类型守卫函数
function isActionArray(value: unknown): value is Action[] {
  if (!Array.isArray(value)) return false;
  return value.every(item => 
    typeof item === 'object' && item !== null && 'name' in item && typeof item.name === 'string'
  );
}

export class SomeClass {
  actions: Action[];

  constructor(item: Item) {
    const actions = item.attributes?.actions;
    // 经过类型守卫验证后，TypeScript会自动识别为Action[]
    if (isActionArray(actions)) {
      this.actions = actions;
    } else {
      // 处理数据格式不符合预期的情况
      this.actions = [];
      throw new Error('actions格式不符合要求');
    }
  }
}

类型守卫兼顾了类型安全和运行时数据校验，适合无法提前确定返回类型的场景。

3. 自定义断言函数：简洁替代双重断言 #

如果信任接口返回的数据结构，可以自定义断言函数，替代繁琐的双重断言，同时保留基础的校验逻辑：

interface Action {
  name: string
}

// 自定义断言函数，直接断言值为Action[]
function assertIsActionArray(value: unknown): asserts value is Action[] {
  if (!Array.isArray(value) || !value.every(item => 
    typeof item === 'object' && item !== null && 'name' in item
  )) {
    throw new Error('不是合法的Action数组');
  }
}

export class SomeClass {
  actions: Action[];

  constructor(item: Item) {
    const actions = item.attributes?.actions;
    assertIsActionArray(actions);
    // 断言后TypeScript自动识别为Action[]
    this.actions = actions;
  }
}

这种方式比双重断言更清晰，同时通过抛出错误避免潜在的类型不匹配问题。

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