型付きクライアントの利用例

読み取り・書き込み・型抽出の補完や戻り値を、VS Codeなどのエディタで確認できます。生成済みのスキーマを同梱しているため、typegenの実行やAPIキーは不要です。

エディタで試す

SDKのリポジトリのルートで実行します。

npm ci
npm run build
code examples

このディレクトリのtsconfig.jsonは、SDK自身のpackage.jsonが指定するビルド済みの公開型定義を参照します。別のSDKをインストールする必要はありません。ビルドとコマンドでの型チェックには、リポジトリの開発用TypeScript7系を使用します。利用者向けのTypeScript6.0以降への対応もCIで検査しています。

まずREADMEのTypeScript節を読み、各ファイルのクエリや入力値を変更して試してください。クライアントにはダミーのAPIキーを設定しています。取得・書き込み関数は実行せず、エディタで型を確認します。

型を試すファイル

確認用のコードはusage/にまとめています。設定はtsconfig.json、生成済みの型はgenerated/に置いています。

ファイル	確認すること
usage/read.ts	読み取りの戻り値と、depth・fieldsに応じた型
usage/write.ts	create・updateの入力の補完と書き込み型
usage/type-extraction.ts	InferMicroCMSContentで取り出した型をpropsに使う
usage/errors.ts	@ts-expect-errorを外し、不正な指定のエラーを確認
usage/scratch.ts	エンドポイントやクエリを自由に変えて試す
usage/shared/queries.ts	fieldsの補完と、取得処理・型抽出で共用するクエリ

fieldsWithCompletionは選べるフィールドパスの補完を試す変数です。queriesは読み取り例と型抽出例で共用し、as constで選んだfieldsとdepthを保持しています。

生成済みのスキーマ

generated/microcms-types.tsは、microcms-typegenで生成したサンプル用サービスの型です。4つのエンドポイントの型と、サービス全体を表すExampleServiceSchemaを含みます。

エンドポイント	API形式	例で確認すること
banner	オブジェクト形式	getObject、IDの有無、update
blogs	リスト形式	categoriesへの参照、create・update
categories	リスト形式	参照先のname
all_fields	リスト形式	多様なフィールドの読み書き、fields・depth

型生成の設定方法はtypegenのREADME、入力スキーマと生成結果はtypegenのサンプルを参照してください。

コマンドで型チェックする

SDKのリポジトリのルートで実行します。

npm run typecheck:examples

TypeScriptコンパイラが型の整合性を検査します。JavaScriptの出力やAPIリクエストの実行は行いません。CIとnpm run test:typesでも利用例を検査します。