0
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?

Gianna
  • 205
  • 2
  • 12
  • What is `RecoilState`? – Tobias S. Aug 26 '22 at 18:19
  • It's similar to state in `useState` but used in Recoil. its composition is like this (sorry it's long) `export class RecoilState extends AbstractRecoilValue {} ` `declare class AbstractRecoilValue { __tag: [T]; __cTag: (t: T) => void; // for contravariance key: NodeKey; constructor(newKey: NodeKey); toJSON(): {key: string}; }` – Gianna Aug 26 '22 at 18:36
  • The type `RecoilState` contains a function where the argument is of type `T`. Therefore it is contravariant. This answer should clear things up: https://stackoverflow.com/questions/66410115/difference-between-variance-covariance-contravariance-and-bivariance-in-typesc – Tobias S. Aug 26 '22 at 18:45

1 Answers1

1

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

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

(Same as RecoilState<OrderOption>)

Optimal
  • 407
  • 3
  • 9
  • well I know I can define `recoilState` like that but I wanted to use `string` because I think I might need to add more string type aliases in the future due to lots kinds of order options :( Why is `RecoilState<'order' | '-createdAt'>` not the same as `RecoilState` ? – Gianna Aug 26 '22 at 18:31
  • Please provide your full code with the definition of `RecoilState` and the definition of `OrderList` (with the expected input variable types). And what does `atom()` exactly do? Why `key` and `default`? If you provide these informations, I can explain your scenario better and I will edit my answer. – Optimal Aug 26 '22 at 18:40