버전 요구사항

Jotai는 TypeScript 3.8 이상의 문법을 사용합니다. 현재 TypeScript 3.7.5 이하 버전을 사용 중이라면 버전을 업그레이드해야 합니다.

Jotai는 타입 추론에 크게 의존하며, strictNullChecks 옵션이 활성화되어 있어야 합니다. tsconfig.json 파일에 "strict": true를 추가하는 것을 고려해 보세요. #550 #802 #838

Notes

기본 아톰은 타입 추론이 기본적으로 적용됩니다

const numAtom = atom(0) // 숫자 타입의 기본 아톰
const strAtom = atom('') // 문자열 타입의 기본 아톰

원시 아톰에 명시적으로 타입을 지정할 수 있음

const numAtom = atom<number>(0)
const numAtom = atom<number | null>(0)
const arrAtom = atom<string[]>([])

파생된 아톰은 대부분 타입 추론이 가능합니다

일반적으로 이 방법을 권장합니다. 파생된 아톰에 타입을 지정하는 것은 처음 해보는 사람들에게는 조금 혼란스러울 수 있기 때문입니다.

# 읽기 전용 파생 아톰
const readOnlyAtom = atom((get) => get(numAtom))
const asyncReadOnlyAtom = atom(async (get) => await get(someAsyncAtom))

# 쓰기 전용 아톰
const writeOnlyAtom = atom(null, (_get, set, str: string) => set(fooAtom, str))
const multipleArgumentsAtom = atom(
  null,
  (_get, set, valueOne: number, valueTwo: number) =>
    set(fooAtom, Math.max(valueOne, valueTwo))
);

# 읽기/쓰기 아톰
const readWriteAtom = atom(
  (get) => get(strAtom),
  (_get, set, num: number) => set(strAtom, String(num))
)
const asyncReadWriteAtom = atom(
  async (get) => await get(asyncStrAtom),
  (_get, set, num: number) => set(strAtom, String(num))
)

파생된 아톰에 명시적으로 타입을 지정할 수도 있습니다

파생된 아톰에 명시적으로 타입을 지정해야 하거나 원하는 경우, 그렇게 할 수도 있습니다.

const asyncStrAtom = atom<Promise<string>>(async () => 'foo')

/**
 * 쓰기 전용 아톰의 경우 세 가지 타입 매개변수를 제공해야 합니다.
 * 첫 번째 타입 매개변수는 아톰에서 반환되는 값을 설명합니다. 다음 예제에서는 `null`입니다.
 * 두 번째 타입 매개변수는 "쓰기" 함수에 전달할 인자(복수)를 설명합니다. 단일 인자만 사용할 계획이라도 이 타입은 예제와 같이 배열이어야 합니다.
 * 세 번째 타입 매개변수는 "쓰기" 함수의 반환 값을 설명합니다. 일반적으로 반환 값이 없기 때문에 아래 예제에서는 `void`를 사용합니다.
 */
const writeOnlyAtom = atom<null, [string, number], void>(
  null,
  (_get, set, stringValue, numberValue) => set(fooAtom, stringValue),
)

/**
 * 읽기/쓰기 아톰도 동일한 세 가지 타입 매개변수를 사용합니다.
 * 완전성을 위해 이 예제에서는 첫 번째 타입 매개변수가 비동기 아톰을 설명할 수도 있음을 보여줍니다.
 */
const readWriteAtom = atom<Promise<string>, [number], void>(
  async (get) => await get(asyncStrAtom),
  (_get, set, num) => set(strAtom, String(num)),
)

useAtom은 atom 타입에 따라 타입이 지정됩니다

const [num, setNum] = useAtom(primitiveNumAtom)
const [num] = useAtom(readOnlyNumAtom)
const [, setNum] = useAtom(writeOnlyNumAtom)

atom의 값 타입에 접근하기

import { ExtractAtomValue, useAtomValue } from 'jotai'
import { userAtom } from 'state'
import { useQuery } from '@tanstack/react-query'

export default function WriteReview(hid) {
  const user = useAtomValue(userAtom)
  const res = useGetReviewQuery(user)
}

function useGetReviewQuery(user: ExtractAtomValue<typeof userAtom>) {
  return fetch('/api/user/' + user.id + '/review')
}