基礎編
TypeScriptとは何かを学習しよう
まず初めに、TypeScriptの概要を学びましょう。JavaScriptとの違いや、型を導入することで得られるメリットについて理解していきます。
- 型システムの概要
学習内容をみる (1演習)
基本的な型定義を理解しよう プロ
TypeScriptの型システムの基礎を学びます。変数や関数、オブジェクトなど、さまざまな要素に型を定義できるようにしましょう。
- 基本の型定義
- 関数の型
学習内容をみる (3演習)
応用編
発展的な型定義の手法について理解しよう プロ
ユニオン型・インターセクション型から、unknown型、タイプガード、配列やオブジェクトの応用的な型付け、そしてジェネリクスまで、一歩進んだ型の扱い方を学びます。
- ユニオン型
- タイプガード
- ジェネリクス
知って差をつける一歩進んだ型を使いこなそう プロ
条件型やインデックス型、Promiseの型付け、never型、d.tsファイル、as const、satisfiesなど、知っていると差がつく発展的な型機能を学びます。
- 条件型
- as const
- satisfies
Type Challenges編
Type Challengesに挑戦しよう(初級・基本のユーティリティ型) プロ
Readonly・Pick・Length・Pushなど、組み込みのユーティリティ型を自分で実装する初級課題に挑戦します。
- Type Challenges 初級
Type Challengesに挑戦しよう(初級・条件分岐と配列・関数の型) プロ
If・Awaited・Concat・First・Includes・Parametersなど、条件分岐や配列・関数に関わる型を実装する初級課題に挑戦します。
- Type Challenges 初級
Type Challengesに挑戦しよう(中級・オブジェクトと配列の型) プロ
LookUp・Omit・Merge・Diff・Pop・Lastなど、オブジェクトや配列を操作する中級課題に挑戦します。
- Type Challenges 中級
学習内容をみる (9演習)
- LookUp - 特定のフィールドが一致するオブジェクトを取り出す プロ
- Pop - 配列から最後の要素を削除する型を実装しよう プロ
- DeepReadonly - オブジェクト型のすべてのプロパティを読み取り専用にする型 プロ
- 関数の戻り値を返す型、ReturnTypeを自分で実装する プロ
- Last型を実装して配列の最後の要素の型を取得しよう プロ
- 第2引数で指定したキーを除外した型を返す型を実装しよう プロ
- Merge型を作って二つのオブジェクト型をマージしよう プロ
- Diff - 二つのオブジェクトの差分を返す型を作ろう プロ
- 文字列をUnion型に変換するStringToUnion<T>を実装しよう プロ
Type Challengesに挑戦しよう(中級・文字列とUnionの型) プロ
TupleToUnion・Trim・Replace・Capitalizeなど、文字列やUnion型を操作する中級課題に挑戦します。
- Type Challenges 中級
学習内容をみる (9演習)
- TupleToUnion - Tuple型からUnion型に変換する型を作ろう プロ
- 文字列から両端の空白を削除した文字列を返すTrim<T>を実装しよう プロ
- Flatten - ネストされた配列をフラットにする型を作ろう プロ
- Replace型を作って型で文字を置換しよう プロ
- 文字列を置換するReplaceAll型を定義しよう プロ
- Capitalize - 文字列型の最初の文字を大文字にする型を作ろう プロ
- ChainableOptions - チェイナブルなオブジェクトに型をつけよう プロ
- AppendArgument - 関数の引数を追加する型を作ろう プロ
- AppendToObject - オブジェクトにキーとバリューを追加する型を作ろう プロ
Type Challengesに挑戦しよう(中級・高度な型操作) プロ
Permutation・PromiseAll・KebabCase・Absoluteなど、さらに高度な型操作とオリジナル課題に挑戦します。
- Type Challenges 中級
学習内容をみる (8演習)
- Permutation - Union 型からその組み合わせの配列を生成する型を実装する プロ
- 関数PromiseAllに型をつけよう プロ
- KebabCase<T>を実装してみよう プロ
- Absolute - 数値型を絶対値に変換する型を作ろう プロ
- LengthOfString型を実装して文字列の長さを型として取得しよう プロ
- AllCombinations型を実装して、与えられた文字列のすべての組み合わせを返そう プロ
- (オリジナル)オブジェクトのプロパティがreadonlyかを判定しよう プロ
- (オリジナル)DeepPick型を作ってオブジェクトから必要なプロパティだけを取得する プロ
Type Challengesに挑戦しよう(上級・型の変換とキー操作) プロ
IsAny・UnionToIntersection・Get・OptionalKeys・RequiredKeysなど、型の判別・変換とオブジェクトのキー抽出に関わる上級課題に挑戦します。
- Type Challenges 上級
学習内容をみる (8演習)
Type Challengesに挑戦しよう(上級・応用的な型操作) プロ
CamelCase・Currying・DeepObjectToUniq・Sumなど、文字列・関数・計算を型レベルで実装する上級課題に挑戦します。
- Type Challenges 上級
よくある質問
- TypeScriptとは何ですか?
- JavaScriptに「型」という仕組みを追加したプログラミング言語です。Microsoftが開発しており、大規模なWebアプリケーション開発で広く採用されています。
- JavaScriptとTypeScriptの違いは何ですか?
- TypeScriptは変数や関数に「型」を指定できます。これにより、コードを実行する前にエラーを検出でき、バグを未然に防げます。TypeScriptで書いたコードは最終的にJavaScriptに変換されて実行されます。
- JavaScript未経験でも受講できますか?
- はい、受講できます。TypeScriptはJavaScriptをベースにした言語なので、本コースを通じて両方の基礎を同時に学ぶことができます。より深く理解したい場合は、JavaScriptの基礎コースも併せて学習するとさらに効果的です。
- 型とは何ですか?
- 変数や関数が扱うデータの種類(文字列、数値、真偽値など)を明示的に指定する仕組みです。型を使うことで、コードの意図が明確になり、ミスを早期に発見できます。
- このコースを終えると何ができるようになりますか?
- TypeScriptの基本的な型の使い方を理解し、型安全なコードが書けるようになります。ReactやNext.jsなど、TypeScriptを使ったフレームワークの学習にスムーズに進めます。