● ts-auto-guardとは？

外からやってくるjsonデータを検査する関数を型から自動生成するものです。

● ts-auto-guard のインストール

npm i -D ts-auto-guard

● 使い方 1. 自動生成

型を記述してあるファイル名を指定して実行

npx ts-auto-guard --export-all src/types/post.ts

同じフォルダに Post.guard.ts という名前で 自動生成されます。

● 使い方 2. データ受信ライブラリに組み込む

Tanstack Query や RTK Query などに組み込みます。

ガードを実行する関数を作成します

/**
 * レスポンスを検査するガード関数を作成して返す。
 * - developmentの場合は受け取ったガード関数を実行する関数を返す
 * - development以外の場合は何も作成せずundefinedを返す
 */
function createValidateResponseType<T>(
  guardFunc: (response: unknown) => response is T,
): ((response: unknown) => T) | undefined {
  if (process.env.NODE_ENV !== 'development') {
    return undefined;
  }
  return (response: unknown): T => {
    if (guardFunc(response)) {
      return response;
    }
    throw new Error(
      `バリデーションエラー。受け取ったデータが(${guardFunc.name})関数にマッチしません。オブジェクトのプロパティの命名と型を確認してください。`,
    );
  };
}

Tanstack Query( React Query )の場合

selectオプションで実行します

import { isPost } from '@/types/post.guard';

const useDataQuery = () => {
  return useQuery({
    queryKey: ['data'],
    queryFn: fetchData,
      // データ受信後にバリデーションを実行する
    select: createValidateResponseType(isPost),
  });
};

RTK Queryの場合

transformResponseオプションで実行します

import { isPost } from '@/types/post.guard';

export const myApi = createApi({
  ........ 
  endpoints: (builder) => ({
    getPost: builder.query<Post | null, void>({
      query: (): FetchArgs => ({
        url: '/post',
      }),
      // データ受信後にバリデーションを実行する
      transformResponse: createValidateResponseType(isPost),
    }),
  }),

● 自動生成される型ガードファイルは、anyを使うことがあるので、除外しておきましょう

vi .eslintignore

例:

src/common/api/*.guard.ts