TypeScript 雰囲気勢が ライブラリのコードリーディングで 得た知識 SaCSS Season 2 Vol.14 2024/11/05 Kihara, Takuya (@tacck) SaCSS Season 2 Vol.14 / #sacss 1

SaCSS Season 2 Vol.14 / #sacss 2 木原 卓也 Kihara, Takuya / @tacck 生活協同組合コープさっぽろ デジタル推進本部システム部 Amplify Japan User Group 運営メンバー ゆるWeb勉強会@札幌 主催 AWS Community Builder Since Q2 2021 / Category: Front-end Web and Mobile 好きなフィギュアスケートの技 スプレッド・イーグル

今日のお話 ■ TypeScript 雰囲気勢の私が ライブラリをコードリーディングすることになったので そこで得た知識をいくつかご紹介します。 ■ 常識だと思ったら、常識だと教えてください。 SaCSS Season 2 Vol.14 / #sacss 3

なぜやることになったのか ■ TSKaigi Kansai 2024 に採択されたテーマ 「Amplify Gen2 Deep Dive / バックエンドの型を いかにしてフロントエンドへ伝えるか」 ■ Amplify Gen2 のライブラリを読んで解説、というテーマ。 ■ 雰囲気勢なのに通ってしまったので、やらざるを得ない状況に追い込む。 SaCSS Season 2 Vol.14 / #sacss 4

ざっくり概要: Amplify Gen2 ■ TypeScript でバックエンドに必要なAWSリソースを定義できる – リソース定義で書いたものを、即時開発環境としてAWSへデプロイ (ホットスワップ) ■ TypeScript でWebフロントエンドのコードが書ける – 上記の定義を即時でタイプヒンティング SaCSS Season 2 Vol.14 / #sacss 5

SaCSS Season 2 Vol.14 / #sacss 6

SaCSS Season 2 Vol.14 / #sacss 7 フロントエンド バックエンド リソース ターミナルからリソースデプロイ npx ampx sandbox

SaCSS Season 2 Vol.14 / #sacss 8

SaCSS Season 2 Vol.14 / #sacss 9 フロントエンド バックエンド リソース ターミナルからリソースデプロイ npx ampx sandbox 1) リソース定義 2) バックエンドで定義 された項目をフロント エンドコードで利用 3) バックエンドで定義 された項目を CDKの定義として利用

得た知識: パッケージ yargs, execa ■ yargs – JS/TSでCLI作る時の、引数のパーサー兼実行ライブラリ。 – CLIのヘルプ表示などもかなり強力そう。 ■ execa – JS/TSのCLIからシステムコマンドを呼び出すライブラリ。 – stdin / stdout などパイプライン周りが強力そう。 SaCSS Season 2 Vol.14 / #sacss 10

得た知識: TypeScript infer / extends ■ 型引数などを使って、定義する型の出しわけを行なう型演算子。 ■ 二つが絡むと、割と混乱する。 SaCSS Season 2 Vol.14 / #sacss 11 type ModelType = T extends true ? T : T extends () => infer R ? R : never; const model1: ModelType = true; const model2: ModelType<() => string> = "true";

得た知識: TypeScript Omit ■ 型引数Tのオブジェクトから、Keysのプロパティを抜いたものを返す。 ■ データベースの情報など実装由来のプロパティを抜いて、 欲しい型にするときに便利そう。 SaCSS Season 2 Vol.14 / #sacss 12 type DbModel = { title: string; dbName: string; }; type RecordModel = Omit; const record: RecordModel = { title: "foo" };

その他 ■ 正直、まだ消化しきれていない状態なので、 精進します。 SaCSS Season 2 Vol.14 / #sacss 13

まとめ ■ TypeScript のライブラリ開発はかなり辛そう – アプリケーション開発で型をうまく使うために、 ライブラリはかなり技巧を凝らしたをした書き方になっている。 ■ これによって、型安全に開発することができる。 – ライブラリ開発者の方々に感謝。 SaCSS Season 2 Vol.14 / #sacss 14

宣伝1 Amplify Boost Up #7 SaCSS Season 2 Vol.14 / #sacss 15 2024/12/19 開催 オンライン参加可能!!

宣伝2 ゆるWeb Advent Carendar 2024 SaCSS Season 2 Vol.14 / #sacss 16 今年もやります お気軽に使ってください!!

宣伝3 TSKaigi Kansai 2024 SaCSS Season 2 Vol.14 / #sacss 17 2024/11/26 開催 オンラインもあるよ!!

END SaCSS Season 2 Vol.14 / #sacss 18