TypeScript Error: Cannot Find Name 'SetAtom' When Using Jotai

Question

I'm currently working on a project that involves using the Jotai library for state management in a TypeScript-based React application. I'm encountering an issue with the SetAtom type that's causing a TypeScript error. I've imported the Jotai library and have set up my state atoms and a setModalType function to update one of the state atoms, which represents a ModalType. However, when I attempt to use the SetAtom type for setModalType, TypeScript reports the following error:

Cannot find name 'SetAtom'.ts(2304)
type SetAtom = /*unresolved*/ any

Here are the relevant parts of my code:

import { SetStateAction, atom, useAtom } from 'jotai';

type ModalType = 'Home' | 'Status' | '';

interface UseModal {
  setModalType: SetAtom<[SetStateAction<ModalType>], void>;
}


const useModal = (): UseModal => {
  const [showModal, setShowModal] = useAtom(modalAtom);

  return { showModal, setShowModal };
};

export default useModal;

What is causing the TypeScript error, and how can I resolve it? Is there a correct way to import and use the SetAtom type in a Jotai context? Are there any potential issues with my setup or code structure that could be leading to this error?

Answer 1

The solution to the problem is to create the following type.

type SetAtom<Args extends any[], Result> = (...args: Args) => Result;

So the code becomes.

import { SetStateAction, atom, useAtom } from 'jotai';

type ModalType = 'Home' | 'Status' | '';
type SetAtom<Args extends any[], Result> = (...args: Args) => Result;

interface UseModal {
  setModalType: SetAtom<[SetStateAction<ModalType>], void>;
}


const useModal = (): UseModal => {
  const [showModal, setShowModal] = useAtom(modalAtom);

  return { showModal, setShowModal };
};

export default useModal;