Unexpected Behavior For atom Update Generic Type

[seeker-3]

Is this a bug?

I created a number atom, then created an updater function that accepts a string that would convert the string to a number, then assign it to the atom. Hover, the set function won't accept a number, but will let me assign a string to the atom with type number.

And when I use the atom in a component, I get no indicator that the type is like number | string, it still thinks it's just a number, even though it's letting me write a string to it.

Here's the full code:

import { atom, useAtom } from 'jotai'
import type { FC } from 'react'

export const numberAtom = atom(10, (get, set, arg: string) => {
  const number = parseInt(arg, 10)
  // won't accept number
  set(numberAtom, number)
  // accepts string
  set(numberAtom, '')
})

export default (function App() {
  const [number, setNumber] = useAtom(numberAtom)

  return null
} as FC)

[dai-shi]

It works in JS, but TS can't infer types. So, we don't recommend it for TS users.
Solutions are atomWithReducer and using two atoms.

Related discussions: #1024 #1141 #1186

[seeker-3]

That's weird. Could the set function not just be it's own type with a generic independent of the arg and atoms generics which it could use to infer its type from the atom passed in as the first parameter?

I'd be interested to dig into this more. I'm surprised there's no way to make this work.

[dai-shi]

You might want to play with something simple with typescript playground, if possible, without jotai.

[seeker-3]

Atom with reducer is a nice way to do this

const numberAtom = atomWithReducer<number, string>(0, (value, action) => {
  return typeof action !== 'undefined' ? parseInt(action) : value
})

That's really unfortunate though, it looks like you were able to get the desired behavior with get (where it figures out the right type from the atom).

[dai-shi]

https://tsplay.dev/NByqpw

import { atom, useAtom } from "jotai";

const numberAtom = atom(10, (get, set, arg: string) => {
  const number = parseInt(arg, 10);
  // won't accept number
  set(numberAtom, number);
  // accepts string
  set(numberAtom, "");
});

const setNumberAtom = atom(null, (get, set) => {
  // do you want it to accept number?
  set(numberAtom, 11);
  // string is fine
  set(numberAtom, "11");
});

const number2Atom = atom(10, (get, set, arg: string | number) => {
  const number = typeof arg === "string" ? parseInt(arg, 10) : arg;
  // it can accept number
  set(number2Atom, number);
  // accepts string
  set(number2Atom, "");
});

const setNumber2Atom = atom(null, (get, set) => {
  // but then this accepts too
  set(number2Atom, 11);
  // string is fine
  set(number2Atom, "11");
});

I assume you want the first to pass and the second to fail.
I think there could be a workaround for this, but it would become very complicated typing and not worth it.

My suggestion is a type assertion: https://tsplay.dev/mpnBaw

import { atom, WritableAtom } from "jotai";

const number3Atom = atom(10, (get, set, arg: string) => {
  const number = parseInt(arg, 10);
  // accepts number with assertion
  set(number3Atom as WritableAtom<number, string | number>, number);
  // accepts string
  set(number3Atom, "");
});

const setNumber3Atom = atom(null, (get, set) => {
  // it does not accept number
  set(number3Atom, 11);
  // string is fine
  set(number3Atom, "11");
});