Skip to main content
Module

x/jotai/docs/guides/typescript.mdx

👻 Primitive and flexible state management for React
Go to Latest
File
---title: TypeScriptdescription: How to use Jotai with TypeScriptnav: 3.01---
## Version requirement
Jotai uses TypeScript 3.8+ syntax. Upgrade your TypeScript version if you're on 3.7.5 or lower.
Jotai relies heavily on type inferences and requires `strictNullChecks` to be enabled. Consider adding `"strict": true` in your tsconfig.json.[#550](https://github.com/pmndrs/jotai/issues/550)[#802](https://github.com/pmndrs/jotai/issues/802)[#838](https://github.com/pmndrs/jotai/issues/838)
## Notes
### Primitive atoms are basically type inferred
```tsconst numAtom = atom(0) // primitive number atomconst strAtom = atom('') // primitive string atom```
### Primitive atoms can be explicitly typed
```tsconst numAtom = atom<number>(0)const numAtom = atom<number | null>(0)const arrAtom = atom<string[]>([])```
### Derived atoms are also type inferred and explicitly typed
```tsconst asyncStrAtom = atom(async () => "foo")const writeOnlyAtom = atom(null, (_get, set, str: string) => set(fooAtom, str)const readWriteAtom = atom<string, number>( get => get(strAtom), (_get, set, num) => set(strAtom, String(num)))```
### useAtom is typed based on atom types
```tsconst [num, setNum] = useAtom(primitiveNumAtom)const [num] = useAtom(readOnlyNumAtom)const [, setNum] = useAtom(writeOnlyNumAtom)```