React+TypeScript构建多选复选框：转换颜色数组为选项结构

1. 定义明确的TypeScript类型 #

先给输入、输出数据定义类型，从根源避免隐式any类型错误：

// 单个颜色数据结构
interface Color {
  name: string;
  id: string;
}

// 外层输入数据结构
interface InputColorData {
  colors: Array<{ color: Color }>;
}

// 组件要求的选项结构
interface MultiSelectOption {
  id: number;
  value: string;
  label: string;
}

2. 安全的数据转换函数 #

使用数组map方法完成转换，同时生成自增的id，完全符合TS类型规范：

const convertToMultiSelectOptions = (input: InputColorData): MultiSelectOption[] => {
  return input.colors.map((item, index) => ({
    id: index + 1, // 生成自增唯一id，也可根据业务用其他唯一标识
    value: item.color.id,
    label: item.color.name
  }));
};

3. 错误原因说明 #

你遇到的Element implicitly has an 'any' type错误，大多是因为转换时使用了未定义类型的空对象（比如const opt = {}; opt['value'] = ...），TS无法推断对象的索引类型。上面的方案直接返回字面量对象，配合明确的返回类型约束，彻底规避了这个问题。

4. 组件使用示例 #

import React from 'react';

// 多选择复选框组件
const MultiSelectCheckBoxes = ({ options }: { options: MultiSelectOption[] }) => {
  return (
    <div className="multi-select">
      {options.map(option => (
        <label key={option.id} className="checkbox-item">
          <input type="checkbox" value={option.value} />
          <span>{option.label}</span>
        </label>
      ))}
    </div>
  );
};

// 模拟输入数据
const rawColorData: InputColorData = {
  colors: [
    { color: { name: "Blue", id: "9ce42304-b732-4791-9731-6f299b6df8c7" } },
    { color: { name: "Violet", id: "90419f06-7d07-45c8-bcec-d675096fe27f" } }
  ]
};

// 页面中使用组件
const App = () => {
  const selectOptions = convertToMultiSelectOptions(rawColorData);
  return <MultiSelectCheckBoxes options={selectOptions} />;
};

export default App;

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