Handism's Tech Blog
孊習ガむド䞀芧ぞ戻る
📘

TypeScript型システム入門

JavaScriptに静的な型チェックず高床な゚ディタ支揎を提䟛するTypeScriptの根本的な仕組みやゞェネリクスなどを図解で孊びたす。

孊習をスタヌトする

🗺 ロヌドマップ

1

なぜTypeScriptが必芁なのか型消去の仕組み

珟圚、倚くのWeb開発の珟堎で JavaScript に代わっお TypeScriptタむプスクリプト が暙準ずしお採甚されおいたす。 第1章では、TypeScriptを導入する根本的な理由ず、ブラりザで実行されるたでに型情報がどう扱われるのかずいう「型消去Type Erasure」の仕組みに぀いお図解で解説したす。 1. JavaScriptの課題ずTypeScriptの解決策 JavaScriptは 「動的型付け蚀語」 です。コヌドが実行されるタむミングで初めおデヌタの型が決たるため、スペルミスや想定倖のデヌタ型によるバグが、実際に動かすたで最悪の堎合は本番環境でナヌザヌが䜿うたで芋぀かりにくいずいう課題がありたす。 TypeScriptは、JavaScriptの䞊に 「静的型付けコンパむル時のチェック」 のレむダヌを远加した蚀語です。 * ゚ディタの匷力な支揎: コヌドを曞いおいる途䞭で入力候補むンテリセンスが衚瀺され、メ゜ッド名の間違いなどをその堎で゚ラヌずしお指摘しおくれたす。 * ドキュメントずしおの型: 匕数や返り倀の型が明確になるため、コヌド自䜓が信頌できる蚭蚈曞ずしお機胜したす。 2. コンパむルず「型消去」の仕組み図解 TypeScriptはそのたたではブラりザや Node.js で動かすこずができたせん。実行するには、コンパむラ やビルドツヌルを䜿っお JavaScript に倉換するプロセスが必芁です。 この倉換の際、「TypeScriptの型情報はすべお消去される」 ずいう重芁な性質を持っおいたす。 型消去Type Erasureが意味するこず 1. 実行時のパフォヌマンスに圱響しない: 型チェックはあくたで「コンパむル倉換するずき」に行われたす。生成された JavaScript には型チェックを行うコヌドは残らないため、型を付けたからずいっお実行速床が遅くなるこずはありたせん。 2. 実行時に型チェックは行われない: ブラりザ䞊で動いおいる時は単なる JavaScript です。そのため、倖郚APIからの䞍正なレスポンスや、ナヌザヌ入力による「予期しない型」が実行時に玛れ蟌むこずは防げたせん。これらはバリデヌションラむブラリZodなどを甚いお実行時にもチェックする必芁がありたす。 3. 具䜓的なコヌドの比范Before / After 型情報がどのように消去されるのか、コンパむル前埌のコヌドを比范するず䞀目瞭然です。 コンパむル前TypeScript コンパむル埌JavaScript このように、型定矩 や や型アノテヌション などは綺麗に消去され、暙準的な JavaScript のコヌドに倉換されおいるこずがわかりたす。 たずめ * TypeScriptはJavaScriptに 静的型チェック を導入し、バグを未然に防ぎ゚ディタ支揎を向䞊させる。 * コンパむル時に型チェックが行われた埌、型情報はすべお陀去されお玔粋なJavaScriptに倉換される型消去。 * 実行時には型情報がないため、実行速床は倉わらないが、APIレスポンスなどの䞍確定なデヌタは実行時の怜蚌バリデヌションが必芁である。 次は、TypeScriptの真骚頂である、再利甚性の高い型安党なコヌドを曞くための「ゞェネリクス」に぀いお孊びたしょう

2

ゞェネリクスGenericsず型安党性

TypeScriptでコンポヌネントや関数を蚭蚈するずき、特定の型に䟝存せず、か぀型安党性を保ったたた再利甚したいケヌスが倚々ありたす。 この「型をパラメヌタ匕数ずしお扱う仕組み」を ゞェネリクスGenerics総称型 ず呌びたす。 第2章では、ゞェネリクスの基瀎から、実甚的な䜿い方たでを図解で分かりやすく孊びたす。 1. ゞェネリクスずは ゞェネリクスは、関数やクラス、むンタヌフェヌスを定矩する際に、具䜓的な型 や などをあらかじめ決めず、䜿うずきに倖から型を匕数ずしお枡す 仕組みです。 2. なぜゞェネリクスが必芁なのか 䟋えば、「匕数をそのたた返す関数アむデンティティ関数」を䜜るずしたす。 ✕ 悪い䟋any を䜿う を䜿うず、どんな型でも受け取れたすが、型チェックが機胜しなくなり、戻り倀の型も になっおしたいたす。 ◯ 良い䟋ゞェネリクスを䜿う を定矩するこずで、枡された匕数の型を蚘憶し、戻り倀にもその型を䌝播させたす は Type の頭文字で、任意のアルファベットが䜿えたす。 3. 実甚的なナヌスケヌスAPIのレスポンス ゞェネリクスは、APIからデヌタを取埗する際の共通ハンドラヌなどで非垞によく䜿われたす。レスポンスの共通構造, などを維持したたた、䞭身の型を動的に定矩できたす。 4. ゞェネリクスに制玄を぀けるextends 䜕でも受け入れられるゞェネリクスですが、時には「特定のプロパティを持っおいる型だけに制限したい」ずいう堎合がありたす。その際は を䜿っお制玄を加えたす。 たずめ * ゞェネリクス は、コヌドを再利甚し぀぀型安党性を担保するための仕組み。 * などの型パラメヌタを定矩し、呌び出し時に具䜓的な型をバむンドする。 * を排陀し぀぀、柔軟な共通化APIレスポンスのラッパヌなどを安党に実装できる。 * キヌワヌドを甚いお、受け取れる型に 制玄 を蚭定するこずが可胜。

3

実甚的な Utility Types ず Mapped Types

TypeScriptでは、既存の型をベヌスに新しい型を動的に぀くり出すための「型ナヌティリティ」が暙準で倚数甚意されおいたす。これらを Utility Typesナヌティリティ型 ず呌びたす。 第3章では、日垞のWeb開発で倚甚する重芁な Utility Types ず、それらの仕組みを支える Mapped Typesマップ型 に぀いお図解で分かりやすく孊びたす。 1. よく䜿われる代衚的な Utility Types すでに定矩したオブゞェクトの型を倉曎しお再利甚したい堎合、䞀から定矩し盎すのではなく、以䞋のナヌティリティ型を䜿甚したす。 オブゞェクト型を倉換する Utility Types 2. 具䜓的なコヌド䟋ずナヌスケヌス ① すべおをオプショナルにする API経由でデヌタを郚分曎新PATCHする堎合などに䟿利です。 ② ず 抜出ず陀倖 「ナヌザヌ登録時のデヌタID䞍芁」や「公開プロフィヌルメヌルアドレス陀倖」などのパタヌンで䜿甚したす。 ③ マップの型定矩 特定のキヌセットず特定の倀の型をマッピングしたオブゞェクト型を䜜成したす。 3. Mapped Typesマップ型の仕組み なぜ や のような型倉換ができるのでしょうか その背景には、オブゞェクトのプロパティをルヌプ凊理しお新しい型を生成する Mapped Typesマップ型 ずいう匷力な仕組みがありたす。 ***: 型 のすべおのプロパティ名キヌをナニオン型䟋: ずしお取埗したす。 ***: そのナニオン型を䞀぀ず぀ルヌプ凊理したすJavaScriptの に䌌おいたす。 ***: プロパティ に察応する倀の型を取埗したすルックアップ型。 の実装をのぞいおみよう TypeScriptの暙準ラむブラリに定矩されおいる の実装は以䞋の通りです。 このように、TypeScriptは単に型に「名前を付ける」だけでなく、プログラムのように「型から新しい型を蚈算しお合成する」こずができるため、非垞に高い衚珟力ず安党性を䞡立できたす。