如何将UiDataUpdateFunction接口对象数组转为字符串数组？类型报错处理

我定义了UiDataUpdateFunction接口，现有一段NgRx Effect代码：

@Effect()
bulkCreateUIDataUpdateFunction$ = this.actions$.pipe(
  ofType<UIDataUpdateFunctionActions.BulkCreateUIDataUpdateFunction>(
    UIDataUpdateFunctionActions.ActionTypes.BulkCreateUIDataUpdateFunction
  ),
  mergeMap((action) => {
    const params = {
      body: action.payload.uiDataUpdateFunctions
    };
    return this.UIDataUpdateFunctionApi.bulkCreate(params).pipe(
      mergeMap((uiDataUpdateFunctions: UiDataUpdateFunction) => {
        console.log(uiDataUpdateFunctions)
        // 后续逻辑
      })
    );
  })
);

控制台打印结果是对象数组，但我需要把它转换成字符串数组。当我把参数类型改为uiDataUpdateFunctions: UiDataUpdateFunction[]时，出现以下TypeScript错误：

The independent variable of type 'OperatorFunction<UiDataUpdateFunction[], Action>' cannot be assigned to a parameter of type 'OperatorFunction<UiDataUpdateFunction, Action>'. The type 'UiDataUpdateFunction[]' is missing the following properties of type 'UiDataUpdateFunction': id, projectId, uiDataStoreId.

我尝试过给参数设置默认数组的写法，依然报相同错误：

mergeMap((uiDataUpdateFunctions: UiDataUpdateFunction[]= [{
  id: '',
  projectId: '',
  uiDataStoreId: '',
}])

也试过用.map()转换数组但写法不对，想请教如何把接口返回的对象数组转换成字符串数组？

1. 核心问题分析 #

报错的根源是this.UIDataUpdateFunctionApi.bulkCreate(params)的返回类型被TypeScript推断为Observable<UiDataUpdateFunction>（单个对象），但实际接口返回的是Observable<UiDataUpdateFunction[]>（对象数组）。同时你误用了mergeMap——mergeMap用于处理返回Observable的异步操作，而这里是同步转换数组，应该用map操作符。

2. 具体实现步骤 #

方法一：修正类型断言（无需修改API定义）

如果暂时无法调整API的类型定义，在代码中先断言返回值为数组类型，再用map转换为字符串数组：

@Effect()
bulkCreateUIDataUpdateFunction$ = this.actions$.pipe(
  ofType<UIDataUpdateFunctionActions.BulkCreateUIDataUpdateFunction>(
    UIDataUpdateFunctionActions.ActionTypes.BulkCreateUIDataUpdateFunction
  ),
  mergeMap((action) => {
    const params = {
      body: action.payload.uiDataUpdateFunctions
    };
    return this.UIDataUpdateFunctionApi.bulkCreate(params).pipe(
      // 断言返回值为对象数组
      map(response => response as UiDataUpdateFunction[]),
      // 转换为字符串数组，这里示例取每个对象的id字段，可根据需求替换成其他属性
      map(uiDataList => uiDataList.map(item => item.id)),
      // 如果需要触发成功Action，继续添加map操作
      map(stringArray => UIDataUpdateFunctionActions.bulkCreateSuccess({ payload: stringArray }))
    );
  })
);

方法二：修正API的返回类型（推荐）

如果bulkCreate接口确实是批量创建，返回数组，直接修改UIDataUpdateFunctionApi中bulkCreate方法的返回类型：

// 在UIDataUpdateFunctionApi中修改方法定义
bulkCreate(params: any): Observable<UiDataUpdateFunction[]> {
  // 原有API调用逻辑
}

这样代码中无需额外断言，直接使用map转换即可：

return this.UIDataUpdateFunctionApi.bulkCreate(params).pipe(
  map(uiDataList => uiDataList.map(item => item.id)),
  map(stringArray => UIDataUpdateFunctionActions.bulkCreateSuccess({ payload: stringArray }))
);

3. 为什么之前的写法失败？ #

• 你用mergeMap处理数组时，RxJS会把数组的每个元素当成单独的流事件，导致类型不匹配；而map是同步转换整个数组，符合需求。
• 设置默认数组只是给参数加了默认值，并没有改变TypeScript对API返回类型的推断，所以报错依然存在。

内容的提问来源于stack exchange，提问作者Doğukan CEBECİ