TS中MUI RadioGroup onChange返回string无法赋值给联合类型如何解决？

核心原因 #

原生input元素的value属性默认是string类型，TS不会根据你写的单选按钮固定value自动推导为'stop' | 'waypoint'联合类型，所以需要手动做类型收窄。

实现方案（同时合并统一onChange处理逻辑） #

第一步：编写通用处理函数 #

利用输入组件的name属性和StopData的键一一对应的特性，写一个通用处理函数，同时兼顾类型安全：

import type { ChangeEvent } from 'react';
// 先定义类型守卫，运行时也能校验stopType合法性
const isStopType = (val: string): val is StopData['stopType'] => {
  return ['stop', 'waypoint'].includes(val);
};

export default function CreateTripStop(stopData: StopData) {
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    // 按照name的不同分支处理
    switch (name) {
      case 'stopName':
        stopData.stopName = value;
        break;
      case 'stopType':
        // 先校验合法性再赋值，完全避免类型错误
        if (isStopType(value)) {
          stopData.stopType = value;
        }
        break;
    }
  };

  return (
    <Box className={classes.flexContainer}>
      <TextField 
        label='Stop Name' 
        placeholder='Cupola Hut' 
        name='stopName'
        onChange={handleChange} 
      />
      <RadioGroup 
        row 
        name='stopType' 
        defaultValue="stop"
        onChange={handleChange}
      >
        <FormControlLabel
          value="stop"
          label="Stop"
          control={<Radio color="primary" />}
          labelPlacement="start"
        />
        <FormControlLabel
          value="waypoint"
          label="Waypoint"
          control={<Radio color="primary" />}
          labelPlacement="end"
        />
      </RadioGroup>
    </Box>
  )
}

临时快速解决（不需要合并逻辑的情况） #

如果不需要合并处理函数，直接给RadioGroup的value做类型断言即可：

onChange={event => stopData['stopType'] = event.target.value as StopData['stopType']}

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