string type alias is not assignable to string in Recoil with typescript

Question

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

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

interface OrderListProps {
  options: { name: string; content: string }[];
  recoilState: RecoilState<string>;
}

const OrderList = ({ options, recoilState }: OrderListProps) => {
return some components }

and When I try rendering

<OrderList options={ORDER_OPTIONS} recoilState={orderState} />

It causes ts(2322) error that says RecoilState<OrderOption> isn't assignable to RecoilState<string> .

If vice versa I understand the error, but OrderOption is still string overall so I don't understand why it's problematic. How can I solve this?

Answer 1

RecoilState<'order' | '-createdAt'> RecoilState<'order' | '-createdAt'> is not the same as RecoilState<string> .

---

Define recoilState as RecoilState<'order' | '-createdAt'> RecoilState<'order' | '-createdAt'>

(Same as RecoilState<OrderOption>)