なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)

バックエンドがフルTSではないような構成のときに、バックエンドとの通信を型安全に実現する手法を紹介したスライドです。
SvelteKitとLaravelを組み合わせたパターンを例に取り、ScribeとOpenAPI TSとOpenAPI fetchを使って型安全にバックエンドにリクエストを行います。

この資料はSvelte Japan Offline Meetup #6での登壇資料です。

Transcript

1. なるべく楽して バックエンドに型をつけたい！ (楽とは言ってない) HIBIKI CUBE @hibiki_cube
2. SvelteKitでの ページ表示までの処理と 型付けについておさらい
3. 例えば…
4. bunx sv create demo
18. でも、これができるのは load関数の返り値に 型がついているからこそ
19. マイページ 見せてちょ
20. サーバーの処理 するやで
21. ユーザーの データ取ってきて
22. 型情報もつけて 渡してあげるよ
23. マイページだよ〜
24. とはいえ、 プロダクトによっては フルTSではない構成に したいこともある。
26. TSのための型？ こちとらPHPやぞ えぇぇ……
29. 例えば…
30. laravel new demo
34. curl -s localhost:8000/api/hello | jq . { "message": "Hi!" }
35. php artisan scribe:generate
39. bunx openapi-typescript \ openapi.yaml \ -o ./src/lib/api.d.ts
48. フルTSではない構成で型安全性を高める • Scribeなどを使って実装からOpenAPI仕様を生成する • OpenAPI仕様があれば、それを使ってTSの型を生成できる • TSの型があれば、それを使って型安全にやりとりができる おわり