0Pricing
TypeScript Academy · レッスン

型安全なtRPCクライアントの概要

tRPCがエンドツーエンドの型安全性を実現する方法を確認します。

「型安全なtRPCクライアントの概要」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

ようこそ

tRPCは、コード生成なしでサーバーとクライアント間のエンドツーエンドのTypeScript型安全性を実現します。

tRPCとは

tRPCを使うと、完全な型安全性を保ちながらクライアントからサーバーの関数を呼び出せます。OpenAPI仕様もコード生成も必要なく、TypeScriptだけで実現できます。

サーバールーターの定義

tRPCルーターを使って、サーバー上に型付きのプロシージャを定義します。
import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
const appRouter = t.router({
  getUser: t.procedure.input(z.number()).query(({ input }) => db.getUser(input)),
});

型の推論

クライアントで使用できるように、ルーターの型をエクスポートします。
export type AppRouter = typeof appRouter;

クライアントのセットアップ

サーバールーターの型を使って、型付きのtRPCクライアントを作成します。
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
const trpc = createTRPCProxyClient<AppRouter>({
  links: [httpBatchLink({ url: '/api/trpc' })],
});

型付きクライアント呼び出し

完全なオートコンプリートを利用しながら、クライアントからサーバーのプロシージャを呼び出します。
const user = await trpc.getUser.query(1);
// user is typed as the return type of getUser

Zodによる入力検証

tRPCの入力バリデーターとしてZodスキーマを使用します。
t.procedure.input(z.object({ name: z.string(), email: z.string().email() })).mutation(...)

ミューテーション

データを変更する操作のためにミューテーションを定義します。
const router = t.router({
  createUser: t.procedure.input(CreateUserSchema).mutation(({ input }) => db.create(input)),
});

React Queryとの統合

tRPCはReact Queryと統合でき、完全な型推論を利用してデータを取得できます。
const { data: user } = trpc.getUser.useQuery(1);
// data is typed automatically

tRPCのエラーハンドリング

tRPCはTRPCErrorによる型付きエラーを提供します。
import { TRPCError } from '@trpc/server';
if (!user) throw new TRPCError({ code: 'NOT_FOUND', message: 'User not found' });

tRPCとRESTとGraphQLの比較

tRPCはフルスタックのTypeScriptプロジェクトに適しています。公開APIや異なる言語間のAPIには、RESTやGraphQLのほうが適しています。

確認問題

tRPCはサーバーとクライアント間の型安全性をどのように実現していますか？

まとめ

型安全なtRPCクライアントの概要：重要な概念とパターンを身につけました。

よくある質問

「型安全なtRPCクライアントの概要」レッスンは無料ですか？

はい。「型安全なtRPCクライアントの概要」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「型安全なtRPCクライアントの概要」で何を学びますか？

tRPCがエンドツーエンドの型安全性を実現する方法を確認します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「型安全なtRPCクライアントの概要」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ジェネリックラッパーによるFetchレスポンスの型付け
  2. Zodによる実行時バリデーション
  3. OpenAPI Codegen：自動生成される型
  4. 型安全なtRPCクライアントの概要
← TypeScript Academyに戻る