目的
以下の書籍を読んだTS初心者かつJS経験者が、実際のプロダクトを覗くことで
書籍によってどこまで実践的な知識を身につけられたか確認します
「プロを目指す人のためのTypeScript入門」（鈴木 僚太）2022年
本記事は単体で読めますが、読了後の感想はこちら
実践
その1 Chrome拡張機能
リポジトリ：
著者の方が作成されたChrome拡張機能です
入力欄でショートカットキーを押すと「█」が入力できる機能ですね
デモはこちら
主要部分は2018年に作成されたコードのため、ならしとして見ていきます
対象コード
lib/ 配下
ロジック分析
- キー(SHIFT+→など)が入力される
- 現在フォーカスしている要素について判別する
- 入力用の文字列を生成
- 文字入力を実行
コード分析
- クラスや、type文による型宣言は不使用
- オブジェクト型は利用あり
- 型注釈についてはトップレベル関数の引数と返り値にはあり
感想
DOM操作用関数が多く存在しますが、関数名と型注釈だけ見れば役割が分かるコードのお手本として参考になりました
Classなどの再利用性を高める機能は不使用でしたが、シンプルなロジックのためオブジェクト型の直利用で問題ないという判断だと思います
その2 RealWorld
RealWorldについてはこちらの記事が分かりやすかったです↓
リポジトリはこちら：
TypeScript + React + Redux Toolkitによるフロントエンド実装です
対象コード
src/types/user.ts
コンポーネント分析
ユーザ情報を扱うオブジェクト
####コード分析
interface + extendsで目的に応じてユーザオブジェクトが保持するプロパティを変化させている
対象コード
src/services/conduit.ts
ロジック分析
CRUDを行うデータアクセス層
コード分析
前述のuser.ts含む型定義を用いて各メソッドの引数・返り値を定義
感想
オブジェクト型を直接ロジックに宣言するよりも再利用性が高くなっています
まとめ
今回参考にさせていただいたプロダクトではあくまでも静的型付け言語としての強みを確認するに留まりました
書籍で学習したTSの強みである、柔軟で複雑な型表現が必要になる場面というのはなかなか限定的なのかなと思います
本書籍に関する記事の執筆は今回で終了しますが、今後Typeによる型宣言が実際どういった場面で用いられるのかについて参考になるプロダクトがあれば更新するかもしれません