如何简化获取指定键对应Items的JavaScript/TypeScript辅助函数？

我有如下JSON对象：

const data = {
  one: {
    items: [
      {
        title: 'Home',
        url: '',
      },
      {
        title: 'Title test',
        url: '/test',
      },
    ],
  },
  two: {
    items: [
      {
        title: 'Title test 2',
        url: '/test2',
      },
      {
        title: 'Title test 2',
        url: '/test2',
      },
    ],
  },
};

我编写了以下JavaScript/TypeScript辅助函数，用于从对象的one或two键中返回items数组：

interface Item {
  title: string;
  url: string;
}

const getItems = (key?: 'one') => {
  if (key === 'one') {
    return data.one.items.map((item: Item) => ({
      title: item.title,
      url: item.url,
    }));
  }
  return data.two.items.map((item: Item) => ({
      title: item.title,
      url: item.url,
    }));
};

使用方式如下：

const items = getItems('one');

items.map((item) => (
 <li>{item.title}</li>
));

请问能否简化该辅助函数，同时得到相同的结果？

首先要说明：你代码里的map完全是冗余操作——只是把原对象的属性原样复制了一遍，直接返回原数组就能达到相同效果。基于此可以做多种简化：

方案1：极简版（支持指定one/two，默认返回two的items） #

interface Item {
  title: string;
  url: string;
}

const getItems = (key: 'one' | 'two' = 'two') => data[key].items;

既保留了类型约束，又用一行代码实现逻辑：参数可选，默认使用two，直接返回对应key下的items数组。

方案2：兼容原函数参数规则（仅允许传one或不传） #

interface Item {
  title: string;
  url: string;
}

const getItems = (key?: 'one') => data[key ?? 'two'].items;

用空值合并运算符??替代if判断，一行搞定分支逻辑，完全匹配原函数的参数行为。

额外优化：给data添加类型约束（可选） #

如果想让TypeScript对data的结构有更强校验，避免后续结构变动引发的隐性问题，可以给data定义类型：

interface Item {
  title: string;
  url: string;
}

interface Data {
  one: { items: Item[] };
  two: { items: Item[] };
}

const data: Data = {
  // 原data内容保持不变
};

const getItems = (key: keyof Data = 'two') => data[key].items;

这样后续如果修改data的结构，TypeScript会及时抛出错误，代码更健壮。

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