React TypeScript中如何为React Aria RadioGroup的onChange正确设置值类型？

问题分析 #

使用string值的Enum作为RadioGroup选项时，TypeScript无法自动将onChange事件的value参数类型推断为Enum类型，导致与useState的Option类型不兼容，出现Argument of type 'string' is not assignable to parameter of type 'SetStateAction<Option>'错误。

优雅解决方案 #

方案1：给RadioGroup显式指定泛型类型

通过为RadioGroup组件指定泛型参数Option，让组件明确值的类型，onChange的参数会自动推断为Option类型，无需类型断言：

import { useState } from "react";
import { Label, Radio, RadioGroup } from "react-aria-components";

enum Option {
  ONE = "option_one",
  TWO = "option_two",
}

export default function App() {
  const options: Option[] = [Option.ONE, Option.TWO];
  const [selectedOption, setSelectedOption] = useState(options[0]);

  return (
    <RadioGroup<Option>
      onChange={(value) => setSelectedOption(value)}
      value={selectedOption}
    >
      <Label>Options</Label>
      {options.map((option) => (
        <Radio key={option} value={option}>
          {option}
        </Radio>
      ))}
    </RadioGroup>
  );
}

方案2：使用类型守卫验证值

如果不想依赖泛型约束，可以在onChange中添加类型守卫函数，验证传入的value是否属于Option枚举，TypeScript会自动缩小类型范围：

import { useState } from "react";
import { Label, Radio, RadioGroup } from "react-aria-components";

enum Option {
  ONE = "option_one",
  TWO = "option_two",
}

// 类型守卫函数：验证值是否属于Option枚举
function isOption(value: string): value is Option {
  return Object.values(Option).includes(value as Option);
}

export default function App() {
  const options: Option[] = [Option.ONE, Option.TWO];
  const [selectedOption, setSelectedOption] = useState(options[0]);

  return (
    <RadioGroup
      onChange={(value) => {
        if (isOption(value)) {
          setSelectedOption(value);
        }
        // 可选：添加非法值的处理逻辑
      }}
      value={selectedOption}
    >
      <Label>Options</Label>
      {options.map((option) => (
        <Radio key={option} value={option}>
          {option}
        </Radio>
      ))}
    </RadioGroup>
  );
}

方案对比 #

• 方案1更简洁，直接通过泛型约束组件类型，适合绝大多数常规场景。
• 方案2更严谨，能处理非法值的边界情况，适合对类型安全性要求极高的场景。

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