Skip to content
ドキュメント
TypeScript

TypeScript

SWR は TypeScript で書かれたアプリにも対応していて、型の安全性をすぐに使えます。

基本的な使い方

デフォルトでは、SWR は key から fetcher の引数の型を推測します。そのため、適切な型を自動的に設定できます。

useSWR

// `key` は `string` に推測されます。
useSWR('/api/user', key => {})
useSWR(() => '/api/user', key => {})

// `key` は { a: string; b: { c: string; d: number } } として推測されます。
useSWR({ a: '1', b: { c: '3', d: 2 } }, key => {})
useSWR(() => { a: '1', b: { c: '3', d: 2 } }, key => {})

// `arg0` は文字列として推測されます。 `arg1` は数値として推測されます。
useSWR(['user', 8], ([arg0, arg1]) => {})
useSWR(() => ['user', 8], ([arg0, arg1]) => {})

keyfetcher の引数の型を明示的に指定することもできます。

import useSWR, { Key, Fetcher } from 'swr'

const uid: Key = '<user_id>'
const fetcher: Fetcher<User, string> = (id) => getUserById(id)

const { data } = useSWR(uid, fetcher)
// `data` は `User | undefined` となります。

同様に、デフォルトでは、fetcher 関数内で投げられる エラー の型は any ですが、型を明示的に指定することができます。

const { data, error } = useSWR<User, Error>(uid, fetcher);
// `data` は `User | undefined` となります.
// `error` は `Error | undefined` となります.

useSWRInfinite

swr/infinite の場合と同じように、型推論に頼るか、自分で明示的に型を指定することができます。

import { SWRInfiniteKeyLoader } from 'swr/infinite'

const getKey: SWRInfiniteKeyLoader = (index, previousPageData) => {
  // ...
}

const { data } = useSWRInfinite(getKey, fetcher)

ジェネリクス

data の型定義は簡単です。デフォルトでは、fetcher の戻り値の型(準備ができていない場合は undefined)を date 型として使用しますが、パラメーターとして渡すこともできます:

// 🔹 A. 型付きの fetcher を使う:
// `getUser` は `(endpoint: string) => User` になります。
const { data } = useSWR('/api/user', getUser)

// 🔹 B. データ型を指定:
// `fetcher` は 通常 `any` を返します。
const { data } = useSWR<User>('/api/user', fetcher)

SWR オプションの型を追加したい場合は、これらの型を直接インポートすることもできます:

import useSWR from 'swr'
import type { SWRConfiguration } from 'swr'

const config: SWRConfiguration = {
  fallbackData: "fallback",
  revalidateOnMount: false
  // ...
}

const { data } = useSWR<string[]>('/api/data', fetcher, config)

ミドルウェアの型

カスタムミドルウェアに型を追加するのに役立つ、インポート可能な追加の型定義がいくつかあります。

import useSWR, { Middleware, SWRHook } from 'swr'

const swrMiddleware: Middleware = (useSWRNext: SWRHook) => (key, fetcher, config) => {
  // ...
  return useSWRNext(key, fetcher, config)
}
Last updated on 2022年12月9日