如何用Interface或DTO从API返回的对象数组提取指定元素？

一、用Interface（TypeScript）实现 #

先通过接口约束原始数据和目标数据的结构，再用map方法提取需要的字段，保证类型安全：

// 定义API返回的原始数据结构
interface RawTodo {
  id: number;
  todo: string;
  completed: boolean;
  userId: number;
}

// 定义组件需要的目标数据结构
interface TodoItem {
  id: number;
  todo: string;
}

// 模拟API返回的原始数组
const rawTodos: RawTodo[] = [
  {"id":1,"todo":"Do something nice for someone I care about","completed":true,"userId":26},
  {"id":2,"todo":"Memorize the fifty states and their capitals","completed":false,"userId":48},
  {"id":3,"todo":"Watch a classic movie","completed":false,"userId":4},
  {"id":4,"todo":"Contribute code or a monetary donation to an open-source software project","completed":false,"userId":48},
  {"id":5,"todo":"Solve a Rubik's cube","completed":false,"userId":31},
  {"id":6,"todo":"Bake pastries for me and neighbor","completed":false,"userId":39}
];

// 转换为组件需要的数组
const targetTodos: TodoItem[] = rawTodos.map(item => ({
  id: item.id,
  todo: item.todo
}));

二、用DTO（数据传输对象）实现 #

把数据转换逻辑封装到DTO类里，适合需要复用转换规则或复杂数据处理的场景：

class TodoDTO {
  id: number;
  todo: string;

  constructor(id: number, todo: string) {
    this.id = id;
    this.todo = todo;
  }

  // 静态方法：从原始对象生成DTO实例
  static fromRaw(rawItem: RawTodo): TodoDTO {
    return new TodoDTO(rawItem.id, rawItem.todo);
  }
}

// 转换数组
const todoDTOList: TodoDTO[] = rawTodos.map(item => TodoDTO.fromRaw(item));

三、其他实用方法 #

1. 解构赋值直接处理 #

纯JS项目里可以不用类型定义，直接用解构提取字段，代码简洁：

const targetTodos = rawTodos.map(({ id, todo }) => ({ id, todo }));

2. 借助工具库（如Lodash） #

如果项目里已经引入Lodash，用pick方法可以快速指定要保留的字段：

import _ from 'lodash';

const targetTodos = rawTodos.map(item => _.pick(item, ['id', 'todo']));

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