React中使用useState存储枚举类型却返回字符串而非数字的问题

我用带类型声明的useState创建枚举类型状态变量：

enum Direction
{
 None,
 North,
 South,
 East,
 West
}

const [direction, setDirection] = useState<Direction>(Direction.None)

TypeScript IDE里类型显示正确，但实际direction变量变成了string类型，导致以下代码执行失败：

const label = direction === Direction.None ? "Select a direction..." : direction.toString();

原因是direction是字符串类型，而Direction.None是数字类型。我不想用==进行比较，毕竟强类型的意义就是避免依赖这类隐式转换行为。请问怎么让useState返回类型正确的枚举状态变量？

更新说明：useState其实能正确保留传入的数据类型，问题根源是我把该枚举值作为第三方组件的key使用，回调中组件将其转换为字符串，传入setDirection后导致了类型错误。即便有TypeScript保护，这类问题也很难防范。

针对第三方组件把枚举值转为字符串传入setDirection的问题，你可以通过以下方式确保状态始终是正确的枚举类型：

• 显式转换字符串到枚举
  在接收第三方组件回调参数时，先把字符串转为数字，再校验并断言为Direction类型：

// 假设第三方组件回调返回字符串类型的枚举值
const handleDirectionChange = (stringValue: string) => {
  const numericValue = parseInt(stringValue, 10);
  // 校验转换后的值是否属于枚举的有效范围
  if (Object.values(Direction).includes(numericValue)) {
    setDirection(numericValue as Direction);
  } else {
    // 处理无效值，比如重置为默认状态
    setDirection(Direction.None);
  }
};

• 改用字符串枚举
  如果第三方组件频繁需要字符串类型的枚举值，直接将Direction定义为字符串枚举，从根源避免类型转换问题：

enum Direction {
  None = "None",
  North = "North",
  South = "South",
  East = "East",
  West = "West"
}

const [direction, setDirection] = useState<Direction>(Direction.None);

此时即使第三方组件传递字符串，也能直接和枚举值做全等比较，无需额外转换：

const label = direction === Direction.None ? "Select a direction..." : direction;

• 封装安全的状态更新函数
  统一处理类型转换逻辑，避免重复代码：

const setSafeDirection = (value: string | Direction) => {
  if (typeof value === "string") {
    const parsed = parseInt(value, 10);
    setDirection(Object.values(Direction).includes(parsed) ? (parsed as Direction) : Direction.None);
  } else {
    setDirection(value);
  }
};

之后只需调用setSafeDirection更新状态，不用每次手动处理类型转换。

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