React+TypeScript中基于联合类型实现强类型单选按钮的优雅方案

我完全理解你的痛点——用联合类型代替enum之后，写单选按钮时重复写字符串不仅冗余，还容易出现拼写错误，而且类型断言也不够优雅。这里有两个简洁且强类型的方案，能让你在编译阶段就发现问题：

方案一：用常量数组+类型推导（推荐，最简洁） #

这个方案的核心是把所有选项定义成一个字面量常量数组，让TypeScript自动推导出对应的联合类型，然后通过遍历数组生成单选按钮，全程不需要类型断言，也不会有拼写漏洞。

步骤1：定义常量数组和联合类型 #

// 用as const确保每个元素是字面量类型，TypeScript能精准推导联合类型
const COLORING_MODES = ["Interp2Colors", "SingleColor", "AlternateColors"] as const;
// 从常量数组推导联合类型，不用手动重复写每个值
type COLORING_MODE = typeof COLORING_MODES[number];

步骤2：在组件中使用 #

import { useState } from 'react';

const COLORING_MODES = ["Interp2Colors", "SingleColor", "AlternateColors"] as const;
type COLORING_MODE = typeof COLORING_MODES[number];

export default function ColoringModeSelector() {
  const [coloringMode, setColoringMode] = useState<COLORING_MODE>("Interp2Colors");

  // 直接接收COLORING_MODE类型的参数，强类型保障
  const handleModeChange = (mode: COLORING_MODE) => {
    setColoringMode(mode);
  };

  return (
    <div className="radio-group">
      {/* 遍历常量数组生成单选按钮，每个mode都是强类型的 */}
      {COLORING_MODES.map((mode) => (
        <label key={mode} style={{ marginRight: '1rem' }}>
          <input
            type="radio"
            value={mode}
            checked={coloringMode === mode}
            onChange={() => handleModeChange(mode)}
          />
          {/* 可以在这里把mode转成更友好的显示文本，比如Interp2Colors → "双颜色插值" */}
          {mode}
        </label>
      ))}
    </div>
  );
}

这个方案的优势： #

• 零重复代码：所有选项只需要在数组里写一次，类型和UI都会自动同步
• 强类型保障：如果数组里的字符串写错，或者在其他地方引用不存在的mode，TypeScript会直接在编译阶段报错
• 无需类型断言：全程没有as COLORING_MODE这种不优雅的写法
• 易维护：后续要新增/删除选项，只需要修改COLORING_MODES数组即可，其他地方自动更新

方案二：单独定义常量（适合选项少且需要自定义显示文本的场景） #

如果你不想遍历数组，想单独编写每个单选按钮，可以给每个选项定义一个字面量常量，这样在引用时也能获得强类型保障：

步骤1：定义常量和联合类型 #

const INTERP_2_COLORS = "Interp2Colors" as const;
const SINGLE_COLOR = "SingleColor" as const;
const ALTERNATE_COLORS = "AlternateColors" as const;

// 基于常量推导联合类型
type COLORING_MODE = typeof INTERP_2_COLORS | typeof SINGLE_COLOR | typeof ALTERNATE_COLORS;

步骤2：在组件中使用 #

import { useState } from 'react';

const INTERP_2_COLORS = "Interp2Colors" as const;
const SINGLE_COLOR = "SingleColor" as const;
const ALTERNATE_COLORS = "AlternateColors" as const;
type COLORING_MODE = typeof INTERP_2_COLORS | typeof SINGLE_COLOR | typeof ALTERNATE_COLORS;

export default function ColoringModeSelector() {
  const [coloringMode, setColoringMode] = useState<COLORING_MODE>(INTERP_2_COLORS);

  return (
    <div className="radio-group">
      <label>
        <input
          type="radio"
          value={INTERP_2_COLORS}
          checked={coloringMode === INTERP_2_COLORS}
          onChange={() => setColoringMode(INTERP_2_COLORS)}
        />
        双颜色插值
      </label>
      <label>
        <input
          type="radio"
          value={SINGLE_COLOR}
          checked={coloringMode === SINGLE_COLOR}
          onChange={() => setColoringMode(SINGLE_COLOR)}
        />
        单一颜色
      </label>
      <label>
        <input
          type="radio"
          value={ALTERNATE_COLORS}
          checked={coloringMode === ALTERNATE_COLORS}
          onChange={() => setColoringMode(ALTERNATE_COLORS)}
        />
        交替颜色
      </label>
    </div>
  );
}

这个方案的优势： #

• 每个选项都是强类型常量，引用时不会出现拼写错误
• 可以给每个单选按钮自定义显示文本，不用受限于mode的字面量名称
• 适合选项数量少，且每个选项需要单独定制UI的场景

两种方案都能完美解决你的问题，我个人更推荐第一种，因为它的维护成本更低，代码更简洁，完全符合DRY原则（Don't Repeat Yourself）。

备注：内容来源于stack exchange，提问作者BobDoolittle