TypeScript を使用して JavaScript アプリケーションをビルドする

中級
学生
開発者
Azure

TypeScript には、JavaScript のすべての機能に加えて、追加のレイヤー - TypeScript 型システムが用意されています。 このラーニング パスでは、JavaScript の開発に TypeScript を使用して、より堅牢なコードを作成し、ランタイムの型エラーを減らし、JavaScript で利用できるようになる前に最新の機能を活用し、開発チームとより良く連携する方法について説明します。

前提条件

  • 次のような基本的な HTML および JavaScript ES6/2015 に関する知識:
    • 条件
    • 関数
    • スコープ
    • 配列
    • ループ
    • Iterators
    • オブジェクト
    • クラス
    • モジュール
  • インストール済みソフトウェア:

このラーニング パス内のモジュール

このモジュールでは、TypeScript 言語について紹介し、それが作られた理由と JavaScript 開発に使用する方法について説明します。 また、今後の演習用に TypeScript 開発環境を設定します。

JavaScript は動的に型指定される言語です。 これにより、変数の宣言は簡単になりますが、場合によっては予期しない結果が発生することがあります。 TypeScript の静的な型システムを使用すると、オブジェクトの形状を記述することができ、より優れたドキュメントが提供され、TypeScript でコードが正常に動作しているかどうかを検証できます。 TypeScript では、名前空間、クラス、プロパティ、関数、変数、その他の言語エンティティの宣言によって、型がそれらのエンティティに関連付けられます。 型の形式を指定し、言語エンティティと関連付ける方法は、エンティティの種類によって異なります。 このモジュールでは、利用できる型をいくつか紹介し、それらを変数に関連付ける方法を示します。 後のモジュールでは、インターフェイス、関数、クラスで静的な型指定を使用する方法を調べます。

JavaScript でインターフェイスはサポートされていないため、JavaScript 開発者の中にはその使用経験がある方も、ない方もいるでしょう。 TypeScript であれば、従来のオブジェクト指向プログラミングの場合と同様にインターフェイスを使用できます。 インターフェイスを使用してオブジェクトの型を定義することもできます。これがこのモジュールでの主な焦点です。

JavaScript で関数を記述する方法がわかっているなら、TypeScript で関数を記述する方法もわかります。 ただし、TypeScript を使用すると、標準的な JavaScript 関数にいくつかの新機能が追加され、いっそう簡単に使用できるようになります。

TypeScript のクラスを使用すると、クラス メンバーの型の注釈、アクセス修飾子、必須または省略可能なパラメーターを指定する機能など、TypeScript 固有の機能を追加することで、ES6 の機能を拡張できます。 TypeScript を使用するもう 1 つの利点は、それを使用してクラスを開発し、必要に応じてすべての主要なブラウザーとプラットフォームで機能する JavaScript にコンパイルできることです。

ジェネリックは、コードベースで定義して再利用できるコード テンプレートです。 これを使用すると、関数、クラス、またはインターフェイスに対して、それらを呼び出す際に使用する型を指示することができます。

TypeScript には、名前空間とモジュールという、コードを整理するための 2 つの方法が用意されています。 この Learn モジュールでは、TypeScript のモジュール (以前のバージョンでは外部モジュールと呼ばれる) を紹介します。

TypeScript には、名前空間とモジュールという、コードを編成するための 2 つの方法があります。 このモジュールでは、名前空間を使用して TypeScript コードを編成する方法について説明します。