inflearn logo
知識共有
inflearn logo

無料で始めるTypeScript:基礎から型設計まで

JavaScriptを学んだ後にTypeScriptを始めると、新しい文法よりも「なぜこの型を使わなければならないのか?」という部分でつまずくことがよくあります。 基本の型からユニオン、型絞り込み、ジェネリック、keyof、Pick、Omitまでを繋げて学習します。また、練習問題を別途ミッションとして提供し、学んだ内容を直接適用できるように構成しました。 受講後は、型の受講エラーをむやみに隠すことなく原因を読み解けるようになり、繰り返される型を安全に減らし、コードの意図を型で表現できるようになります。

17名 が受講中です。

難易度 初級

受講期間 無制限

TypeScript
TypeScript
TypeScript
TypeScript

受講後に得られること

  • anyや型アサーションでエラーを隠すことなく、期待される型と実際の型の違いを見つけて正しく修正することができます。

  • オブジェクト、関数、ユニオン、インターフェースを活用して、コードの意図と許容可能な状態を型で表現できます。

  • ジェネリックと制約を活用することで、重複コードを減らしながらも入力と出力の具体的な型を維持することができます。

  • keyof、typeof、Pick、Omit、Partial、Recordなどを利用して、既存の型から必要な型を安全に抽出・変換することができます。

ほとんどのTypeScript学習は、エラーを「消す」ところで止まってしまいます。赤い波線が消えれば終わったと感じるものです。しかし、asで断定し、anyで覆い隠したコードは、ランタイムでそのままクラッシュします。

この講義では、同じコードを2つの方式で並べて見せながら、何が本当に安全なのかを各チャプターで区別します。

  • エラーを隠すコード:const user = data as User -> コンパイルは通りますが、サーバーが異なる構造を返すとランタイムでクラッシュします。

  • エラーを解決するコード:外部データはunknownとして受け取り、検証を通過して初めてドメイン型になります。


完走後にできること

  1. 長いTypeScriptのエラーメッセージから、誤った型関係が最初に食い違った箇所を見つけ出します。

  2. anyの代わりにunknownと型絞り込みを使用して、外部データを安全に扱います。 để xử lý dữ liệu bên ngoài một cách an toàn.

  3. オブジェクトと関数の型を目的に合わせてモデリングし、不正な状態を表現不可能なように設計します。

  4. ジェネリックとkeyof・ユーティリティ型で、繰り返される型を安全に減らします。

  5. 判別共用体とneverチェックにより、分岐の漏れをコンパイル段階で防ぎます。

  6. assatisfiesの違いを理解し、回避ではなく検証を選択します。, đồng thời lựa chọn việc xác thực thay vì bỏ qua.


カリキュラム(6つのパート · Chapter 1~14)

Part 1. TypeScriptを始める

  • Ch 1. JavaScriptの限界とTypeScriptの誕生

  • Ch 2. コンパイルプロセス、開発環境、tsconfig.json

Part 2. 基本型を固める

  • Ch 3. 型推論、型アノテーション、プリミティブ型とリテラル型

  • Ch 4. 配列、タプル、オブジェクト型

  • Ch 5. 型エイリアス、インターフェースと特殊型

Part 3. 型の組み合わせと関係

  • Ch 6. ユニオンとインターセクション

  • Ch 7. 型の絞り込みと判別可能なユニオン

  • Ch 8. 型アサーション、satisfies、構造的部分型と互換性

Part 4. 関数とオブジェクト指向

  • Ch 9. 関数型、引数とオーバーロード

  • Ch 10. クラス、アクセス修飾子、抽象クラスとインターフェース

Part 5. ジェネリック

  • Ch 11. ジェネリック関数、型、インターフェースとクラス

  • Ch 12. ジェネリック制約条件と再利用可能なタイプ設計

Part 6. 型プログラミング

  • Ch 13. keyof, typeof, インデックス型 (Indexed Access Types)

  • Ch 14. ユーティリティ型と実践的な型変換


このような方におすすめです

  • JavaScriptの初・中・上級コースを終えた方

  • asanyでエラーを消しているだけだと感じている方

  • APIレスポンスを型アサーションで受け取って使い、ランタイムで痛い目を見た方

  • ジェネリックとユーティリティ型を「理解して」使いたい方

  • なぜそう使うのか、判断基準まで知りたい方

こんな方に
おすすめです

学習対象は
誰でしょう?

  • JavaScriptは知っているけれど、TypeScriptをどこから始めればいいか分からず途方に暮れている方

  • TypeScriptのエラーをanyや型アサーションで解決している方

  • TypeScriptの文法は勉強したけれど、実際の使い方が思い浮かばない方

  • Reactやフロントエンドフレームワークを学ぶ前に、型の基礎を固めたい方

前提知識、
必要でしょうか?

  • JavaScriptの基本文法(変数、条件文、繰り返し文、関数、配列、オブジェクトの基本的な使い方を理解している必要があります。)

こんにちは
potatosamです。

キャリア認証

71

受講生

3

受講レビュー

2

回答

5.0

講座評価

5

講座

こんにちは、4年目フロントエンドエンジニアのポテト先生です。

現在はグローバルモビリティサービスを開発しています。多言語サービスの構築を通じて実務経験を積み、世界中の開発者が使用するオープンソースライブラリreact-hook-formのグローバルTop 30コントリビューターでもあります。

しかし、私も最初からこうだったわけではありません。

JSを初めて学んだ時、YouTubeの講義を見ながらコードを写している時はすべて理解したつもりでいたのに、いざ空のエディタを開くと頭が真っ白になる経験を何度もしました。最初はただググって見つけたコードをコピー&ペーストするのに精一杯で、エラーが出るとどこから手をつければいいのか分からず、徹夜をしながら何日も挫折したりもしました。

その過程で本当にたくさん迷いました。DOMが何かも分からないままコードを書き、イベントがなぜ2回実行されるのか分からず、何時間も無駄にすることもありました。当時の私に最も必要だったのは、膨大な文法の暗記ではありませんでした。「このコードがなぜ動くのか」を説明してくれる誰かでした。

4年間の実務を通じて積み上げてきたもの、そして私が初心者時代に最も迷った部分を整理して、この講義を作りました。私のように遠回りする必要はありません。私が先に経験してきたからです。

もっと見る

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

potatosamの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!

無料