オーバーロード関数の話 @Mita.ts #2

Mita.ts #2にて話したオーバーロード関数についての資料です。

https://mitats.connpass.com/event/329494/

Transcript

1. オーバーロード関数の話 @Mita.ts #2
2. 技術記事を書いたりするのが趣味。 最近はReactを使ったアプリケーションを書いています。 ユーザーインターフェイスやブラウザが好き。 https://github.com/ken7253 https://zenn.dev/ken7253 https://dairoku-studio.com ken7253 Frontend developer
3. オーバーロード関数使ってますか？
4. オーバーロード関数 is 何？ 関数のシグネチャーを複数宣言できる機能 関数名・引数の型・返り値の型をまとめた情報のこと。 関数宣言( function )のみで利用可能。 引数の型に応じて返り値の型を変えることができる。 Conditional types を使わないので記述が分かりやすい。 📒 シグネチャー
5. オーバーロード関数 is 何？ こういう感じに定義する。 // シグネチャーのパターンを定義 export function (): void; export function ( : number): number; export function ( : string): Error; // 全てのシグネチャーを満たすように関数を実装 export function ( ?: number | string): void | number | Error { if (typeof === 'number') { return * 2; } else if (typeof === 'string') { return new ('invalid Type'); }; . ("void"); }; foo foo value foo value foo value value value value TypeError console log
6. 🤔
7. 何が嬉しいんだ…？
8. 例として、任意のオブジェクトをマージする処理を実装したとする。 こうすると関数の利用者側に２つの選択を提示できる。 先にオブジェクトの存在チェックを行って安全な状態で渡してもらう。 とりあえず値を突っ込んで後でエラーハンドリングを行う。 存在チェックを行えば返り値から Error 型が除去される。 オーバーロード関数の使いどころ function merge(obj1: Obj1, obj2: Obj2): Record<string, unknown>; function merge(obj1: Obj1 | null, obj2: Obj1 | null): Error | Record<string, unknown>; function merge( obj1: Obj1 | null, obj2: Obj1 | null ): Error | Record<string, unknown> { // マージ処理を実装 };
9. 設計時の注意点
10. 設計時の注意点 小さいことをうまくやる オーバーロードは最小限で オーバーロード関数とパターンマッチでTSが型推論を諦めた ジェネリクスや単純なunion型で解決できる場合が多い サバイバルTypescript｜オーバーロード以外も検討しよう 💡 神関数にならないように 💡 型推論のコストに注意 💡 理由なく使っていいわけではない