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