如何在React-Typescript中将字符串数组转为指定键值对对象

问题描述 #

我有一个字符串数组，需要将其转换为每个键对应值为true的键值对对象，示例如下：

期望输出：

const output = { string1: true, string2: true, string3: true };

示例输入：

const strarray = ["string1","string2","string3"];

以下是几种在React-TypeScript中实现该转换的常用方法：

方法1：使用Array.reduce() #

这是处理数组转对象的经典方式，TypeScript可自动推导类型：

const strarray = ["string1", "string2", "string3"];

const output = strarray.reduce((acc, curr) => {
  acc[curr] = true;
  return acc;
}, {} as Record<string, boolean>);

通过Record<string, boolean>指定初始空对象的类型，确保TypeScript识别最终对象的键为字符串、值为布尔值。

方法2：使用Object.fromEntries() #

ES2019引入的API，写法更简洁直观：

const strarray = ["string1", "string2", "string3"];

const output = Object.fromEntries(
  strarray.map(item => [item, true])
) as Record<string, boolean>;

先将数组元素转换为[键, 值]格式的二维数组，再通过Object.fromEntries()直接转换为目标对象。

方法3：手动遍历（基础逻辑演示） #

如果需要更直观的实现逻辑，可使用for循环：

const strarray = ["string1", "string2", "string3"];
const output: Record<string, boolean> = {};

for (const item of strarray) {
  output[item] = true;
}

先初始化指定类型的空对象，再遍历数组为每个键赋值true。

可选：精确类型推导 #

如果你的字符串数组是固定字面量数组，可让TypeScript推导更精确的键类型：

const strarray = ["string1", "string2", "string3"] as const;
type StrKeys = typeof strarray[number];

const output: Record<StrKeys, boolean> = strarray.reduce((acc, curr) => {
  acc[curr] = true;
  return acc;
}, {} as Record<StrKeys, boolean>);

此时output的类型会被精确推断为{ string1: boolean; string2: boolean; string3: boolean }，而非宽泛的Record<string, boolean>。

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