TypeScript中如何定义select类型让event.target.value匹配选项值类型

问题根源 #

原生 HTMLSelectElement 的 value 属性按照W3C规范固定为字符串类型，无论你给option的value传入什么类型，最终从事件对象中拿到的都是序列化后的字符串，因此直接使用原生ChangeEventHandler无法直接获取自定义类型的值。

解决方案：改造Select为泛型组件 #

我们通过泛型约束选项值的类型，同时调整onChange回调的参数，直接透传类型安全的选中值，从组件层面解决类型问题：

第一步：修改Select.tsx代码 #

import * as React from "react";
import type { ChangeEvent, ReactElement } from "react";

// 泛型接口，约束选项value的类型
export interface OptionType<T extends string | number | null> {
  value: T;
  label: string;
}

// 泛型组件定义，T为选项value的类型
export const Select = <T extends string | number | null>({
  value,
  onChange,
  options
}: {
  value: T;
  // 回调也可以保留事件参数，定义为：(e: ChangeEvent<HTMLSelectElement>, value: T) => void
  onChange: (value: T) => void;
  options: OptionType<T>[];
}): ReactElement => {
  // 内部处理原生change事件
  const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
    const selectedValue = e.target.value;
    // 从options中匹配到对应的原始value，保证类型正确
    const matchedOption = options.find(opt => String(opt.value) === selectedValue);
    if (matchedOption) {
      onChange(matchedOption.value);
    }
  };

  return (
    <select value={value ?? ""} onChange={handleChange}>
      {options.map((option) => (
        <option value={option.value ?? ""} key={String(option.value)}>
          {option.label}
        </option>
      ))}
    </select>
  );
};

第二步：在业务代码中使用 #

此时onChange回调拿到的参数就是类型完全匹配的自定义类型，不需要额外处理：

import * as React from "react";
import { Select } from "./Select";
const { useState } = React;

type UnitType = "cm" | "m" | "km";
interface UnitOptionType {
  label: string;
  value: UnitType;
}

const timeOptions: UnitOptionType[] = [
  { label: "Centimeter", value: "cm" },
  { label: "Meter", value: "m" },
  { label: "Kilometre", value: "km" }
];

export const App = () => {
  const [value, setValue] = useState<UnitType | null>(null);

  return (
    <div>
      <Select
        options={timeOptions}
        value={value}
        // 这里的selectedValue自动被推导为UnitType类型
        onChange={(selectedValue) => {
          setValue(selectedValue);
        }}
      />
    </div>
  );
};

应急方案（不改造组件） #

如果暂时不想改造组件定义，可以直接用类型断言解决，但是这种方式无类型校验，存在安全风险：

onChange={(event) => {
  setValue(event.target.value as UnitType)
}}

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