Recoil+TypeScript中字符串类型别名无法赋值给string的问题

TypeScript 中，RecoilState<T> 属于逆变类型。虽然 OrderOption 是 string 的子类型（特定字符串字面量的联合类型），但 RecoilState<OrderOption> 无法赋值给 RecoilState<string>。这是因为 RecoilState 包含状态修改能力（比如 setRecoilState）：如果允许这种赋值，OrderList 组件可能会将任意 string 值写入 orderState，破坏 OrderOption 仅能为 '-createdAt' 或 'participationFee' 的类型约束，TypeScript 会阻止这种潜在的类型不安全操作。

方案1：给 OrderList 组件添加泛型（推荐，兼顾类型安全和复用性） #

将组件定义为泛型组件，适配任意字符串子类型的 RecoilState：

import { atom, RecoilState } from 'recoil';

export type OrderOption = '-createdAt' | 'participationFee';

export const orderState = atom<OrderOption>({
  key: 'order',
  default: '-createdAt',
});

// 定义泛型Props
interface OrderListProps<T extends string> {
  options: { name: string; content: T }[];
  recoilState: RecoilState<T>;
}

// 泛型组件实现
const OrderList = <T extends string>({ options, recoilState }: OrderListProps<T>) => {
  // 组件逻辑
  return <div>排序选项列表</div>;
};

// 使用时自动推导类型，无报错
<OrderList options={ORDER_OPTIONS} recoilState={orderState} />

方案2：限定 Props 的 RecoilState 类型为 OrderOption #

如果 OrderList 组件仅用于处理 OrderOption 类型的状态，可直接修改 Props 类型：

interface OrderListProps {
  options: { name: string; content: string }[];
  recoilState: RecoilState<OrderOption>; // 替换为具体类型
}

这种方式简单，但会降低组件复用性，仅适合组件用途单一的场景。

方案3：放宽 OrderOption 的类型约束（不推荐） #

如果不需要严格的字面量类型检查，可将 OrderOption 定义为 string 的别名：

export type OrderOption = string; // 失去字面量约束

但这会丢失 TypeScript 的类型校验能力，不建议使用。

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