TypeScript
メインページ > 工学 > 情報技術 > プログラミング > TypeScript
TypeScriptは、JavaScriptのスーパーセットです。TypeScriptは、静的型付け、クラス、インターフェース、継承などの機能をJavaScriptに加えます。 これにより、開発者はより大規模なプロジェクトでの開発をより効率的に行うことができます。 本チュートリアルでは、TypeScriptの基本的な構文、データ型、関数、クラス、インターフェースなどについて学習できます。
TypeScriptの概要

TypeScriptは、マイクロソフトによって開発された、JavaScriptのスーパーセット言語であり、JavaScriptに対して型システムやクラス、インターフェイス、ジェネリクスなどの静的な機能を追加しています。TypeScriptは、JavaScriptの開発をより安全かつ効率的にするために設計されています。
TypeScriptの概要

TypeScriptの主な特徴は以下の通りです。
TypeScriptの概要

JavaScriptは動的型付けの言語であり、変数の型を宣言する必要がありません。一方、TypeScriptは静的型付けの言語であり、変数や関数の型を宣言することができます。
TypeScriptの概要

JavaScriptはオブジェクト指向プログラミングをサポートしていますが、クラスやインターフェイスの宣言方法は限定的です。一方、TypeScriptはオブジェクト指向プログラミングをより豊富にサポートしており、クラスやインターフェイスの宣言がより柔軟になっています。
TypeScriptの概要

JavaScriptはコンパイルエラーを実行時に発生させるため、開発者がエラーを特定するのが難しい場合があります。一方、TypeScriptはコンパイル時にエラーチェックを行うため、開発者は実行時にエラーが発生することを事前に防止することができます。
TypeScriptのインストール

以下は、Node.js、Deno、およびTypeScript PlaygroundでTypeScriptをインストールおよびビルドする方法です。
TypeScriptのインストール

それぞれの特徴:
TypeScriptのインストール

ts-nodeは、Node.jsのランタイム環境でTypeScriptコードを実行するためのツールです。Node.jsは、JavaScriptを実行するためのランタイム環境であるため、TypeScriptのコードを直接実行することはできませんが、ts-nodeを使用することで、TypeScriptのコードをトランスパイルせずに直接実行することができます。
TypeScriptのインストール

ts-nodeは、TypeScriptの実行を容易にするために開発され、TypeScriptファイルをコンパイルし、実行する必要がないため、より速く開発することができます。また、TypeScriptの実行に必要な設定ファイルや依存関係の管理も自動的に行われます。
TypeScriptのインストール

ts-nodeは、グローバルにインストールすることができ、コマンドラインから単一のファイルまたはディレクトリを実行することができます。また、ts-nodeは、Node.js REPL(Read-Eval-Print Loop)にも統合されており、TypeScriptのスニペットをインタラクティブに実行することができます。
TypeScriptのインストール

だけでコンパイルと実行が行われ、ソースコードが変更されていない場合は、キャッシュ上のコンパイル後の .js を直接実行します。
TypeScriptのインストール

ts-nodeは、TypeScriptプロジェクトの開発をより迅速かつ簡単にするための便利なツールであり、特にNode.jsとTypeScriptを組み合わせた開発において、大きな利点を提供します。
TypeScriptの基本文法

このコードの中で、TypeScriptとJavaScriptの主な違いは変数、定数、関数、クラス、インターフェース、ジェネリックス、および制御構文の宣言に型情報を含んでいることです。
TypeScriptの基本文法

具体的には、変数の宣言には型アノテーションが含まれています。JavaScriptでは、変数の宣言時に型を指定する必要はありません。
TypeScriptの基本文法

また、型の宣言にはTypeScriptで導入されたtypeキーワードが使用されており、JavaScriptには存在しません。
TypeScriptの基本文法

関数の引数と返り値に型情報が含まれており、関数が返す値の型を指定する必要があります。JavaScriptでは、関数の引数や返り値に型を指定する必要はありません。
TypeScriptの基本文法

クラスのメンバー変数やメソッドにも型情報が含まれており、JavaScriptではクラスのメンバーに型を指定する方法がありません。
TypeScriptの基本文法

インターフェイスにはジェネリック型パラメータが含まれており、TypeScriptにはジェネリック型パラメータをサポートする機能がありますが、JavaScriptには存在しません。
TypeScriptの基本文法

制御構文は、if-else分岐、switch文、forループ、whileループが含まれていますが、JavaScriptとの違いはありません。ただし、ループ内で使用される変数については、TypeScriptでは事前に型を指定する必要があります。
TypeScriptの基本文法

TypeScriptでは、変数に対して型を指定することができます。これにより、コードの安全性が向上し、読みやすくなります。以下に、変数と型に関する基本的な情報を示します。
TypeScriptの基本文法

変数を宣言する方法はいくつかありますが、基本的な方法は次の通りです:
TypeScriptの基本文法

ここで、variableName は変数の名前であり、type は変数の型です。
TypeScriptの基本文法

TypeScriptは型推論を行います。つまり、変数に初期値が与えられている場合、TypeScriptはその初期値から型を推論し、その型を変数に割り当てます。例:
TypeScriptの基本文法

型推論が十分ではない場合、または変数の型を明示的に指定したい場合は、型アノテーション(Type Annotation)を使用します:
TypeScriptの基本文法

注意: 上記の型は基本的なものであり、カスタム型を作成することも可能です。
TypeScriptの基本文法

any 型は、任意の型を持つことを示します。すべての型のスーパーセットであり、型チェックが行われません。
TypeScriptの基本文法

TypeScriptの数値型はnumber型です。これは整数や浮動小数点数などの数値を扱うことができます。
TypeScriptの基本文法

数値リテラルは、コード内で具体的な数値を表現するために使用されます。 これには、10進数、2進数、8進数、16進数などの表記方法があります。
TypeScriptの基本文法

これらの数値リテラルを使用することで、異なる進数の数値を直接コードに表現することができます。
TypeScriptの基本文法

TypeScriptの文字列型は、JavaScriptの文字列型と同様に、文字のシーケンスを表すために使用されます。ただし、TypeScriptにはいくつかの追加機能があります。
TypeScriptの基本文法

まず、TypeScriptの文字列型には、バッククォートを使用したテンプレート文字列があります。これは、JavaScriptのバッククォートを使用したテンプレート文字列と似ていますが、TypeScriptでは、テンプレート文字列内に埋め込まれた式の型チェックを行うことができます。以下は、テンプレート文字列内に変数を埋め込んで使用する例です。
TypeScriptの基本文法

また、TypeScriptには、文字列リテラル型があります。これは、文字列リテラルを使用して型を定義することができる機能であり、文字列リテラル型を使用することで、文字列リテラルの集合に対して安全に操作を行うことができます。以下は、文字列リテラル型を使用して、有効な色名のみを受け付ける関数を定義する例です。
TypeScriptの基本文法

以上のように、TypeScriptの文字列型には、JavaScriptにはないいくつかの追加機能があります。これらの機能は、文字列処理をより簡単かつ正確に行うためのものであり、開発者にとって大きな利点を提供します。
TypeScriptの基本文法

TypeScriptの真理値型(boolean)は、JavaScriptの真理値型と同様に、trueまたはfalseの値を持ちます。
TypeScriptの基本文法

JavaScriptと同様に、TypeScriptの真理値型は、if文や三項演算子などの条件分岐に使用されます。しかし、TypeScriptの真理値型にはいくつかの差異があります。
TypeScriptの基本文法

まず、TypeScriptの真理値型は、明示的な型注釈を使用して変数に型を割り当てる場合に必要です。つまり、TypeScriptで変数に真理値型の値を代入する場合、明示的に型注釈を付ける必要があります。例えば、以下のコードを考えてみましょう。
TypeScriptの基本文法

このコードでは、変数isDoneにtrueという真理値型の値を代入しています。しかし、この代入文で明示的に型注釈を使用していることに注意してください。
TypeScriptの基本文法

また、TypeScriptの真理値型は、JavaScriptの厳密等価演算子(===)や不等価演算子(!==)の使用を推奨します。これは、TypeScriptが型安全性を重視しているためです。厳密等価演算子と不等価演算子は、値と型が一致しない場合にも比較を行うため、型の不一致によるバグを防ぐことができます。例えば、以下のコードを考えてみましょう。
TypeScriptの基本文法

このコードでは、変数numに0という数値型の値を代入し、変数isTrueにfalseという真理値型の値を代入しています。その後、if文でnumとisTrueを比較しています。この比較は、JavaScriptではfalseになりますが、TypeScriptではコンパイルエラーとなります。これは、numとisTrueが型が異なるためです。このように、厳密等価演算子や不等価演算子の使用によって、TypeScriptは型安全性を保つことができます。
TypeScriptの基本文法

JavaScriptにおいても真理値型はありますが、明示的な型注釈の必要はありません。また、厳密等価演算子や不等価演算子の使用は推奨されますが、必須ではありません。JavaScriptは動的型付けを採用しており、このため比較演算子の使用によってバグを回避することはできません。
TypeScriptの基本文法

JavaScriptでは、voidキーワードは式を評価して何も返さないことを示します。たとえば、console.log()関数は値を返さないため、型アノテーションとしてvoidを使用することができます。
TypeScriptの基本文法

しかし、TypeScriptではvoidはやや異なります。TypeScriptのvoid型は、戻り値がない関数の戻り値の型を指定するために使用されます。具体的には、void型は何も返さない関数(つまり、returnステートメントを含まない関数)の戻り値の型を指定するために使用されます。void型を指定することで、TypeScriptはその関数が値を返さないことを保証します。
TypeScriptの基本文法

例えば、以下のような関数があるとします。
TypeScriptの基本文法

この関数は、string型の引数を受け取り、それをコンソールに出力しますが、何も返しません。そのため、void型を戻り値の型として指定する必要があります。
TypeScriptの基本文法

一方、JavaScriptでは、voidは戻り値がないことを示すために使用されますが、型システムでは使用されません。JavaScriptでは、値を返さない関数は、単に何も返さないため、voidキーワードは必要ありません。
TypeScriptの基本文法

JavaScriptには、nullという値があります。この値は、変数に何も割り当てることができないことを示します。つまり、変数はnull以外の値を持つことができますが、null自体は値を持ちません。
TypeScriptの基本文法

一方、TypeScriptでは、null型があります。null型は、変数がnull値またはundefined値を持つことを明示的に示すために使用されます。
TypeScriptの基本文法

以下は、null型の使用例です。
TypeScriptの基本文法

この例では、myString変数はstring型またはnull型を持つことができます。最初に、myString変数に文字列を割り当て、次にnullを割り当てることができます。string型の変数にnullを直接割り当てることはできません。
TypeScriptの基本文法

このように、TypeScriptのnull型は、nullまたはundefined値を受け入れる変数の型を定義するために使用されます。JavaScriptでは、nullは値自体を表すために使用されますが、型として使用されることはありません。
TypeScriptの基本文法

JavaScriptには、undefinedという値があります。この値は、変数に値が割り当てられていないことを示します。つまり、変数はundefined以外の値を持つことができますが、undefined自体は値を持ちません。
TypeScriptの基本文法

一方、TypeScriptでは、undefined型があります。undefined型は、変数がundefined値を持つことを明示的に示すために使用されます。
TypeScriptの基本文法

以下は、undefined型の使用例です。
TypeScriptの基本文法

この例では、myNumber変数はnumber型またはundefined型を持つことができます。変数に何も割り当てられていないため、console.log()関数で変数の値を出力すると、undefinedが表示されます。
TypeScriptの基本文法

このように、TypeScriptのundefined型は、変数がundefined値を持つことを明示的に示すために使用されます。JavaScriptでは、undefinedは値自体を表すために使用されますが、型として使用されることはありません。
TypeScriptの基本文法

JavaScriptには、never型はありません。しかし、TypeScriptにおいては、never型は存在します。この型は、関数が終了しないことを示します。
TypeScriptの基本文法

例えば、次のような関数があります。
TypeScriptの基本文法

この関数は、Errorオブジェクトをスローしています。Errorオブジェクトがスローされた場合、関数は終了することはありません。そのため、この関数の戻り値の型はneverとなっています。
TypeScriptの基本文法

また、never型は、型システムの中でエラーを表すためにも使用されます。例えば、以下のような関数があった場合、
TypeScriptの基本文法

この関数は、whileループ内でエラーを処理するために、無限ループを行います。このため、この関数の戻り値の型はneverになります。
TypeScriptの基本文法

never型は、TypeScriptの静的型付けにおいて、関数が終了しないことや、エラーを表すことを明示的に示すために使用されます。JavaScriptでは、never型は存在しないため、この型を使用することはできません。
TypeScriptの基本文法

unknown型は、TypeScript 3.0から導入された型の一つで、JavaScriptには存在しない型です。この型は、ある値が何であるかを明確にはわからない場合に使用されます。
TypeScriptの基本文法

JavaScriptでは、どんな型の値でも代入可能なのに対し、TypeScriptでは型の厳密さが求められます。そのため、TypeScriptの静的型付けにおいて、未知の型を扱う場合にはunknown型が用意されています。
TypeScriptの基本文法

unknown型を使うと、変数の型が未知の場合、型チェックを通過するためには、先に型ガードを行う必要があります。以下は、unknown型の変数を扱う例です。
TypeScriptの基本文法

このように、unknown型は、変数の型が不明な場合に使用されます。そのため、値に対する型チェックを実施する必要があります。unknown型を使用することで、JavaScriptにはない型安全性を保つことができます。
TypeScriptの基本文法

object型は、TypeScriptにおける型の一つで、JavaScriptにも存在する型です。ただし、TypeScriptのobject型はJavaScriptのobject型とは異なる点がいくつかあります。
TypeScriptの基本文法

JavaScriptのobject型は、すべてのオブジェクトを表す汎用的な型であり、配列や関数も含まれます。一方、TypeScriptのobject型は、非プリミティブ型であり、オブジェクトのプロパティとそのプロパティの型を定義するために使用されます。
TypeScriptの基本文法

以下は、object型を使用してオブジェクトを定義する例です。
TypeScriptの基本文法

この例では、person変数にobject型のオブジェクトを代入しています。この場合、object型は、オブジェクトのプロパティとそのプロパティの型を定義するために使用されています。
TypeScriptの基本文法

一方、JavaScriptでは、object型は汎用的な型であるため、オブジェクトのプロパティやその型を指定することはできません。また、JavaScriptには型注釈がないため、変数の型を指定することもできません。
TypeScriptの基本文法

このように、TypeScriptのobject型は、JavaScriptのobject型とは異なる点があるため、注意が必要です。
TypeScriptの基本文法

TypeScriptの配列型は、JavaScriptの配列型と非常に似ていますが、いくつかの追加機能があります。
TypeScriptの基本文法

まず、TypeScriptの配列型には、要素の型を指定することができます。これは、JavaScriptの配列型にはない機能であり、配列内の要素の型が一致しない場合に、TypeScriptは型エラーを発生させます。以下は、number型の配列を定義する例です。
TypeScriptの基本文法

また、TypeScriptの配列型には、ジェネリック型を使用して、任意の型の配列を表現することができます。以下は、ジェネリック型を使用して、文字列型の配列を定義する例です。
TypeScriptの基本文法

さらに、TypeScriptの配列型には、読み取り専用の配列型があります。これは、配列の要素を変更できないことを保証する型であり、TypeScriptは、読み取り専用の配列型を使用して、配列を操作する関数やメソッドが要素を変更しないことを確認します。以下は、読み取り専用の配列型を使用して、配列の要素を変更できないことを保証する例です。
TypeScriptの基本文法

以上のように、TypeScriptの配列型には、JavaScriptにはないいくつかの追加機能があります。これらの機能は、配列操作をより安全かつ正確に行うためのものであり、開発者にとって大きな利点を提供します。
TypeScriptの基本文法

tupleは、TypeScriptにおける型の一つで、複数の要素を含む配列を表すために使用されます。JavaScriptにはtuple型は存在しないため、TypeScriptとJavaScriptとの間には差異があります。
TypeScriptの基本文法

以下は、tupleを使用して数値と文字列を持つ配列を定義する例です。
TypeScriptの基本文法

この例では、myTuple変数に[number, string]型の配列を代入しています。[number, string]型は、最初の要素が数値型、2番目の要素が文字列型であることを定義しています。
TypeScriptの基本文法

一方、JavaScriptでは、配列の要素には制限がありません。任意の型の要素を持つことができます。
TypeScriptの基本文法

このように、TypeScriptのtuple型は、JavaScriptの配列とは異なる点があります。TypeScriptのtuple型は、要素の数と型が固定されており、型安全性を高めることができます。
TypeScriptの基本文法

enumは、TypeScriptにおける型の一つで、列挙型を表現するために使用されます。JavaScriptにはenum型は存在しないため、TypeScriptとJavaScriptとの間には差異があります。
TypeScriptの基本文法

以下は、enumを使用して曜日を表す列挙型を定義する例です。
TypeScriptの基本文法

この例では、DayOfWeekという名前の列挙型を定義しています。enumキーワードを使用し、{}の中に列挙する値を記述しています。ここでは、SundayからSaturdayまでの曜日を定義しています。
TypeScriptの基本文法

一方、JavaScriptでは、列挙型を表現する方法はありません。通常は、定数を使用することで同様の機能を実現します。
TypeScriptの基本文法

このように、TypeScriptのenum型は、JavaScriptの定数とは異なる点があります。TypeScriptのenum型は、列挙型を表現するために特別に設計されており、列挙型の使用をより簡単に、かつ型安全に実現することができます。
TypeScriptの基本文法

複数の型を持つことを示すために、Union型を使用することができます:
TypeScriptの基本文法

JavaScriptには「intersection」という機能はありませんが、TypeScriptでは利用可能です。
TypeScriptの基本文法

「intersection」は、複数の型を結合することで新しい型を作成する方法です。結合された型は、それらのすべての型のメンバーを持ちます。
TypeScriptの基本文法

例えば、以下のように Person と Serializable という2つのインターフェースがあるとします。
TypeScriptの基本文法

これら2つのインターフェースを結合して、新しいインターフェース PersonSerializable を作成することができます。
TypeScriptの基本文法

PersonSerializable は、 Person と Serializable の両方のメンバーを持ちます。したがって、 name 、 age 、および serialize の3つのメンバーがあります。
TypeScriptの基本文法

このように、 intersection を使用することで、異なる型の機能を1つの型にまとめることができます。
TypeScriptの基本文法

複雑な型を再利用するために、キーワードtypeを用いて 型エイリアスを定義できます:
TypeScriptの基本文法

TypeScriptには、クラス型という型があります。これは、クラスのインスタンスを型として指定できるという点で、JavaScriptとは大きく異なります。 クラス型は、JavaScriptのクラスと同様に、オブジェクト指向プログラミングの概念をサポートします。クラス型を使用することで、型安全性を高め、コードの保守性を向上させることができます。
TypeScriptの基本文法

例えば、以下のようなクラスがあるとします。
TypeScriptの基本文法

このクラスを使用して、以下のようにインスタンスを生成することができます。
TypeScriptの基本文法

TypeScriptでは、このクラスを型として扱うことができます。
TypeScriptの基本文法

このように、クラス型を使用することで、変数にクラスのインスタンスを代入する際に、そのインスタンスが持つメンバー変数やメソッドにアクセスできるようになります。これにより、より安全で読みやすいコードを書くことができます。
TypeScriptの基本文法

TypeScriptのinterfaceは、JavaScriptには存在しない概念です。interfaceは、オブジェクトの形状(shape)を定義するために使用されます。オブジェクトがinterfaceで定義された形状に適合しているかどうかを確認するために使用することができます。
TypeScriptの基本文法

JavaScriptには、オブジェクトの形状を定義する方法がありません。そのため、JavaScriptでは、実際にオブジェクトを作成し、プロパティやメソッドが存在するかどうかをチェックする必要があります。
TypeScriptの基本文法

TypeScriptのinterfaceは、この問題を解決するために導入されました。interfaceを使用することで、オブジェクトの形状を明確に定義することができ、コードの読みやすさや保守性が向上します。
TypeScriptの基本文法

例えば、以下のようにinterfaceを使用してオブジェクトの形状を定義することができます。
TypeScriptの基本文法

上記のコードでは、Personというinterfaceが定義されています。Personはnameとageという必須のプロパティと、オプションのaddressプロパティを持つオブジェクトの形状を表します。
TypeScriptの基本文法

このinterfaceを使用して、以下のようにオブジェクトを作成することができます。
TypeScriptの基本文法

上記のコードでは、Personインターフェースを使用して、nameとageプロパティを持つオブジェクトを作成しています。また、addressプロパティはオプションであるため、省略することができます。
TypeScriptの基本文法

interfaceを使用することで、オブジェクトの形状を明確に定義し、プロパティやメソッドが存在するかどうかを簡単にチェックすることができます。
TypeScriptの基本文法

TypeScriptにおいて、関数も型付けされるため、関数型を宣言することができます。JavaScriptには関数型の宣言方法がありませんが、TypeScriptでは型アノテーションまたはインターフェースを使用して関数の型を定義できます。
TypeScriptの基本文法

この例では、addという関数が定義されています。add関数は2つの引数(aとb)を取り、それぞれがnumber型であることをTypeScriptに示しています。また、戻り値もnumber型であることを示しています。
TypeScriptの基本文法

TypeScriptでは、シグネチャーと呼ばれる機能を使って、関数の型をより詳細に定義することができます。シグネチャーは、関数の引数と戻り値の型のみを定義し、関数の本体は含まれません。
TypeScriptの基本文法

TypeScriptのnamespaceはJavaScriptにはない機能であり、TypeScriptの静的型付けシステムの一部です。namespaceを使用することで、グローバル名前空間を汚染することなく、関連する関数、変数、クラスをグループ化できます。
TypeScriptの基本文法

以下は、TypeScriptのnamespaceの例です。
TypeScriptの基本文法

このnamespaceは、MyNamespaceという名前の名前空間を作成し、messageという変数、showMessageという関数、そしてPersonというクラスを含んでいます。exportキーワードは、これらの要素を名前空間外からアクセス可能にするために使用されます。
TypeScriptの基本文法

以下は、上記のnamespaceをJavaScriptに変換した例です。
TypeScriptの基本文法

JavaScriptには、namespaceという概念がないため、上記のコードは、IIFE(Immediately-Invoked Function Expression)というテクニックを使用して、名前空間をエミュレートしています。このテクニックは、名前空間内の変数や関数がグローバルスコープに漏れ出すことを防ぎ、名前の競合を回避するために有用です。また、namespace内で定義された要素は、MyNamespaceオブジェクトのプロパティとしてアクセスできます。
TypeScriptの基本文法

TypeScriptの関数は、JavaScriptの関数と同じように動作しますが、いくつかの差異があります。
TypeScriptの基本文法

まず、TypeScriptの関数には、パラメータに型を指定することができます。これにより、関数のパラメータが期待される型と異なる場合に、TypeScriptがコンパイル時にエラーを検出することができます。
TypeScriptの基本文法

また、TypeScriptの関数には、戻り値に型を指定することができます。これにより、関数が返す値の型を定義することができます。
TypeScriptの基本文法

さらに、TypeScriptの関数には、オプションのパラメータやデフォルト値を指定することができます。これらの機能は、JavaScriptでも利用できますが、TypeScriptでは型情報を合わせて指定することができます。
TypeScriptの基本文法

TypeScriptの関数には、ジェネリック型やアロー関数など、JavaScriptには存在しない機能もあります。これらの機能を使うことで、より柔軟な関数を定義することができます。
TypeScriptの基本文法

以上のように、TypeScriptの関数は、JavaScriptの関数と比べて、より型安全で、より柔軟な機能を持っています。
TypeScriptの基本文法

以下の例では、パラメータと戻り値の型を明示的に指定しています。
TypeScriptの基本文法

同じ関数をJavaScriptで書く場合は、型アノテーションは不要です。
TypeScriptの基本文法

以下の例では、アロー関数のパラメータと戻り値の型を明示的に指定しています。
TypeScriptの基本文法

同じ関数をJavaScriptで書く場合は、型アノテーションは不要です。
TypeScriptの基本文法

以下の例では、Tという型パラメータを使って、配列の中身を逆順にする関数を定義しています。
TypeScriptの基本文法

同じ関数をJavaScriptで書く場合は、型パラメータを使うことはできません。
TypeScriptの基本文法

TypeScriptでは、型定義を別のファイルに分離することができます。以下の例では、greet.d.tsというファイルに、greet関数の型定義を書いています。
TypeScriptの基本文法

この型定義ファイルを使用することで、JavaScriptのファイルでもTypeScriptの関数の型情報を利用することができます。
TypeScriptの基本文法

JavaScriptでは、型定義ファイルを使用することはできません。
TypeScriptの基本文法

TypeScriptでサードパーティ製ライブラリーやES2015などの標準ライブラリの型定義ファイルを入手する方法は以下の通りです。
TypeScriptの基本文法

TypeScriptの定義ファイルの生成方法には、以下の2つの方法があります。
TypeScriptの基本文法

以上の方法は、TypeScriptのプロジェクトで定義ファイルを生成する方法です。一方、JavaScriptでは、定義ファイルを生成する標準的な方法はありません。しかし、JSDocを使用して、関数やオブジェクトの型情報をドキュメントとして記述することで、JavaScriptのコードにも型情報を付与することができます。
TypeScriptの基本文法

TypeScriptの定義ファイルの書式は、以下のようになっています。
TypeScriptの基本文法

このように、declareキーワードを用いて、関数や変数の宣言を行います。また、関数の引数や戻り値には、型アノテーションを付与することができます。
TypeScriptの基本文法

例えば、以下はgreeter関数の定義ファイルの例です。
TypeScriptの基本文法

一方、JavaScriptには、定義ファイルの書式は存在しません。代わりに、JSDocと呼ばれるドキュメントコメントを使用して、関数や変数の型情報を記述することができます。
TypeScriptの基本文法

以下は、JSDocを使用してgreeter関数に型情報を付与する例です。
TypeScriptの基本文法

このように、@paramタグや@returnsタグを使用して、引数や戻り値の型情報を記述します。 ただし、JavaScriptのJSDocは、TypeScriptの定義ファイルのようにコンパイル時に静的な型チェックを行うわけではないため、注意が必要です。
TypeScriptの基本文法

TSDocは、TypeScriptのためのドキュメンテーションコメント記法です。TSDocは、JSDocと同じように、ソースコード内にドキュメンテーションコメントを記述するための標準的な形式を提供します。
TypeScriptの基本文法

TSDocは、TypeScriptコードにおいて、型情報やパラメーター、戻り値などの情報を含むコメントを書くことができます。これにより、開発者は、TypeScriptコードを使用する際に、より詳細な情報を把握することができます。
TypeScriptの基本文法

TSDocは、TypeScriptの型情報に基づいて、APIドキュメントを自動的に生成することができます。これにより、開発者は、手作業でドキュメンテーションを作成する手間を省くことができます。
TypeScriptの基本文法

TSDocは、TypeScriptの公式ドキュメンテーションにも使用されており、広く採用されています。
クラス

JavaScriptにECMAScript2015(ES6)で導入された、キーワード class (クラス)を TypeScript もサポートしています。
クラス

Ruby#ユーザー定義クラスの都市間の大圏距離を求めるメソッドを追加した例を、TypeScriptに移植。
TypeScriptの高度な機能

このコードは、TypeScriptにおけるモジュールの使い方の例です。
TypeScriptの高度な機能

JavaScriptでもES6からは、exportキーワードやimportキーワードを使用してモジュールを定義することができるようになりました。しかし、TypeScriptでは、これらのキーワードに加えて、型定義も一緒に書くことができます。
TypeScriptの高度な機能

myModule.tsでは、exportキーワードを使用してmyFunctionとMyInterfaceを外部に公開しています。myFunctionは単純な関数で、console.logでメッセージを表示します。MyInterfaceは、nameとageという2つのプロパティを持つインターフェースです。
TypeScriptの高度な機能

main.tsでは、myModule.tsからmyFunctionとMyInterfaceをimportしています。そして、myFunctionを呼び出し、MyInterfaceを使ってオブジェクトを作成しています。
TypeScriptの高度な機能

TypeScriptのモジュール機能は、JavaScriptのものとほぼ同じですが、型定義を含めることで、コードの安全性と保守性を向上させることができます。
TypeScriptの高度な機能

このコードは、TypeScriptにおけるアノテーションとデコレータの使い方の例です。
TypeScriptの高度な機能

デコレータは、クラスのプロパティやメソッド、パラメーターに対して、実行時にカスタム処理を追加するための構文です。アノテーションは、特定の型や属性を指定するための構文です。
TypeScriptの高度な機能

このコードでは、@myDecorator、@myMethodDecorator、@myParameterDecoratorという3つのデコレータを使用しています。@myDecoratorは、MyClassクラスのmyPropertyプロパティに適用され、@myMethodDecoratorはmyMethodメソッドに適用されています。@myParameterDecoratorは、MyClassクラスの_myParameterパラメーターに適用されています。
TypeScriptの高度な機能

それぞれのデコレータ関数内では、引数として与えられたtarget、key、descriptor、indexというオブジェクトにアクセスして、必要な処理を行います。たとえば、@myDecoratorデコレータ内では、targetとkeyを使って、MyClassクラスのmyPropertyプロパティに対するカスタム処理を追加することができます。
TypeScriptの高度な機能

また、MyClassのコンストラクターでは、@myParameterDecoratorを使用して、_myParameterパラメーターに対するカスタム処理を追加しています。これにより、コンストラクターが実行される前に、パラメーターに対するチェックや変換を行うことができます。
TypeScriptの高度な機能

JavaScriptにおいては、デコレータに対応する構文はありませんが、TypeScriptのデコレータはJavaScriptのプロトタイプチェーンを利用して実現されています。また、アノテーションに相当するものもありません。
TypeScriptの高度な機能

このコードは、TypeScriptでのインターフェースとオブジェクトの使用例を示しています。
TypeScriptの高度な機能

これにより、TypeScriptでは型安全性が向上し、コードの信頼性と保守性が向上します。
TypeScriptの高度な機能

このコードは、列挙型(enum)を使用して、TypeScriptで列挙値を扱う方法を示しています。
TypeScriptの高度な機能

列挙型は、固定値の集合を表すための型であり、定数のように扱えます。TypeScriptにおける列挙型は、JavaScriptのオブジェクトに近いものですが、列挙型には定数に対して名前を与えることができます。
TypeScriptの高度な機能

この例では、Colorという名前の列挙型を定義し、3つの値(Red、Green、Blue)を持たせています。関数printColorは、Color型の引数を受け取り、その値が何であるかに応じて、対応する色の文字列をコンソールに出力します。
TypeScriptの高度な機能

このコードには default 節がないため、すべての enum Color のメンバーに対して switch 文での処理が定義されていないと、TypeScript コンパイラがエラーを出力します。つまり、 enum Color に新しいメンバーを追加するときは、すべての場合分けを考慮して switch 文を更新する必要があります。
TypeScriptの高度な機能

そのため、このコードでは網羅性が担保されており、メンバーの追加などの変更があった場合にもコンパイルエラーで指摘されるので、開発者が見落としを防ぐことができます。
TypeScriptの高度な機能

JavaScriptには列挙型の概念がないため、同じような機能を実現するためには、オブジェクトや配列を使用することが一般的です。例えば、以下のようなconstオブジェクトを定義して列挙型の代わりに使用することができます。オブジェクトよりTypeScriptの列挙型が優れている点としては、エディターの自動補完機能や、スイッチ文による型安全の検査が利用でき、開発効率の向上に役立つことが挙げられます。
TypeScriptの高度な機能

ただし、TypeScriptの列挙型は、エディターの自動補完機能や、スイッチ文による型安全の検査を提供するなど、開発効率の向上に役立ちます。
TypeScriptの高度な機能

このコードは、TypeScriptにおける型の合成の例です。
TypeScriptの高度な機能

まず、MyTypeという名前の型を定義しています。この型は、nameとageという2つのプロパティを持つオブジェクト型です。
TypeScriptの高度な機能

次に、MyOptionalTypeという名前の型を定義しています。この型は、MyType型のすべてのプロパティをオプションにしたもので、Partialというジェネリック型を使用して定義されています。つまり、MyOptionalType型を持つオブジェクトは、nameとageの両方、あるいはいずれかのプロパティを持っているかもしれないということです。
TypeScriptの高度な機能

その後、MyReadOnlyTypeという名前の型を定義しています。この型は、MyType型のすべてのプロパティを読み取り専用にしたもので、Readonlyというジェネリック型を使用して定義されています。つまり、MyReadOnlyType型を持つオブジェクトのプロパティは、読み取り専用であるため、値を変更することはできません。
TypeScriptの高度な機能

最後に、MyCompositeTypeという名前の型を定義しています。この型は、MyType型とMyOptionalType型とMyReadOnlyType型をすべて組み合わせたものです。つまり、MyCompositeType型を持つオブジェクトは、nameとageの両方、あるいはいずれかのプロパティを持っているかもしれず、すべてのプロパティが読み取り専用であるということです。
TypeScriptの高度な機能

最後に、myObjectという名前のオブジェクトを定義し、MyCompositeType型で型注釈しています。myObjectは、nameが'John'で、ageが30であるオブジェクトであり、すべてのプロパティが読み取り専用であるため、プロパティの値を変更することはできません。
TypeScriptの高度な機能

JavaScriptには、型の合成の概念はありません。しかし、JavaScriptでは、複数のオブジェクトを結合して新しいオブジェクトを作成するために、オブジェクトのスプレッド演算子(...)が使用できます。例えば、以下のようにして、Object.assign()メソッドを使用して、複数のオブジェクトを結合することができます。
TypeScriptの開発環境

TypeScriptには様々な開発環境がありますが、以下に代表的な方法を示します。
TypeScriptの開発環境

TypeScriptのIDEとしては、以下のようなものがあります。
TypeScriptの開発環境

これらのIDEはTypeScriptの構文ハイライトや、型チェック、自動補完などの機能を備えています。特にVisual Studio CodeはTypeScriptの開発に最適化されており、TypeScriptのデバッグ機能も利用可能です。
TypeScriptの開発環境

TypeScriptをデバッグする場合、以下のような方法があります。
TypeScriptの開発環境

フロントエンド開発においては、ブラウザの開発者ツールを利用することが一般的です。開発者ツールを起動し、ブレークポイントを設定することで、TypeScriptのコードをステップ実行することができます。
TypeScriptの開発環境

バックエンド開発においては、Visual Studio Codeのデバッグ機能を利用することが一般的です。VSCodeでプロジェクトを開き、ブレークポイントを設定した上で、デバッグモードで起動することで、TypeScriptのコードをデバッグすることができます。
TypeScriptの開発環境

TypeScriptでのテスト方法としては、以下のような方法があります。
TypeScriptの開発環境

これらのツールは、TypeScriptのテストをサポートしています。Jestは特にTypeScriptとの親和性が高く、設定の手間が少ないことが特徴です。
TypeScriptの開発環境

テストを書く際は、describeやit、expectなどのAPIを使い、テストスクリプトを記述します。テストコードは通常、TypeScriptで書かれるため、テストランナーによってTypeScriptからJavaScriptへのコンパイルが自動的に行われます。
TypeScriptの開発環境

以上が、TypeScriptの開発環境、デバッグ方法、テスト方法についての簡単な紹介です。
TypeScriptとフロントエンド・フレームワーク

TypeScriptを活用したフロントエンド開発には、様々なフレームワークが存在し、それぞれの特性によってプロジェクトの選択が可能です。特に、仮想DOMに基づくフレームワークや仮想DOMを使わないアプローチがあり、それぞれ一長一短があります。
TypeScriptとフロントエンド・フレームワーク

仮想DOM(Virtual DOM)は、ウェブアプリケーションの効率的なUI更新を実現するための概念です。通常、ウェブブラウザ上でのUIの変更はDOM(Document Object Model)と呼ばれる階層構造を持つ要素を直接変更することで行われます。しかし、これには効率上の課題が存在します。
TypeScriptとフロントエンド・フレームワーク

仮想DOMは、UIの変更をより効率的に行うために導入された手法で、以下のような仕組みを採用しています:
TypeScriptとフロントエンド・フレームワーク

React.jsはMeta(旧Facebook)によって開発されたUI構築のためのライブラリであり、TypeScriptとの組み合わせにより型安全性が向上します。仮想DOMを利用することで、効率的で柔軟なUI更新が可能であり、大規模なアプリケーションにも適しています。
TypeScriptとフロントエンド・フレームワーク

主な特徴:
TypeScriptとフロントエンド・フレームワーク

React.js + TypeScriptの組み合わせは、型安全性と効率的なUI更新の両方を追求する現代のフロントエンド開発において非常に重要な選択肢となっています。
TypeScriptとフロントエンド・フレームワーク

AngularはGoogleによって開発され、大規模で複雑なアプリケーションの構築に適しています。元々TypeScriptで記述されており、強力な型システムを活かした開発が可能です。
TypeScriptとフロントエンド・フレームワーク

主な特徴:
TypeScriptとフロントエンド・フレームワーク

Angularはこれらの特徴を組み合わせ、大規模で複雑なアプリケーションの開発をサポートしています。型安全性と豊富な機能セットにより、堅牢でメンテナンス性の高いアプリケーションを構築することが可能です。
TypeScriptとフロントエンド・フレームワーク

Vue.jsはEvan Youによって開発され、シンプルで柔軟な構文を提供するライブラリです。Vue.jsにTypeScriptを組み込むことで、プロジェクトの可読性や保守性が向上します。
TypeScriptとフロントエンド・フレームワーク

主な特徴:
TypeScriptとフロントエンド・フレームワーク

Vue.js + TypeScriptの組み合わせは、柔軟性と型安全性のベストなバランスを提供します。豊富なエコシステムと優れたドキュメントにより、開発者は生産性を維持しながら高品質なアプリケーションを構築できます。
TypeScriptとフロントエンド・フレームワーク

Svelteは仮想DOMを使わず、ビルド時にコンパイルされる手法を採用しています。この特異なアプローチにより、ランタイムのオーバーヘッドが極めて少なく、最終的なアプリケーションのサイズを著しく小さく保つことができます。
TypeScriptとフロントエンド・フレームワーク

主な特徴:
TypeScriptとフロントエンド・フレームワーク

このアプローチにより、Svelteは現代のフロントエンド開発において、軽量で効率的な選択肢として注目を浴びています。
TypeScriptとフロントエンド・フレームワーク

Alpine.jsはJavaScriptとHTMLの標準的な属性を利用し、UIを制御するための軽量なライブラリです。仮想DOMを使用せず、直感的でシンプルな構文を提供しています。
TypeScriptとフロントエンド・フレームワーク

主な特徴:
TypeScriptとフロントエンド・フレームワーク

Alpine.jsはこれらの特性により、小規模なプロジェクトや簡潔なUIの実装において優れた選択肢となっています。
TypeScriptとフロントエンド・フレームワーク

Hyperappは小規模なフレームワークで、特筆すべきは仮想DOMを使用しない点です。基本的な機能を提供しながらも、軽量で効率的なアプリケーションの開発が可能です。
TypeScriptとフロントエンド・フレームワーク

主な特徴:
TypeScriptとフロントエンド・フレームワーク

これらの特徴により、Hyperappは小規模なプロジェクトや軽量なアプリケーションの開発に適しています。仮想DOMを使わないことで得られる自由度は、柔軟で効率的なフロントエンド開発に貢献しています。
TypeScriptとフロントエンド・フレームワーク

仮想DOMを使用しない場合でもコンポーネント化は可能です。コンポーネント化は、UIや機能を独立した部品として分割し、再利用性や保守性を向上させる開発手法です。仮想DOMはこの手法を実現するための一つのアプローチですが、他のアプローチも存在します。
TypeScriptとフロントエンド・フレームワーク

例えば、Vue.jsは仮想DOMを採用していますが、Svelteは仮想DOMを使わずにコンポーネント化を実現しています。Svelteでは、ビルド時にコンポーネントがフレームワークによって最適化され、効率的なランタイムが生成されます。
TypeScriptとフロントエンド・フレームワーク

コンポーネント化は、仮想DOMがなくても、適切なツールやライブラリを使用することで実現可能です。 ただし、仮想DOMを使用しない場合、手動でDOMの変更や再描画を管理する必要があり、その分コードの複雑性が増す可能性があります。選択はプロジェクトの要件や開発者の好みに依存するため、慎重に検討することが重要です。
TypeScriptとフロントエンド・フレームワーク

他にも様々なフロントエンドフレームワークが存在します。以下はいくつかの注目すべきフレームワークです。
TypeScriptとフロントエンド・フレームワーク

これらのフレームワークはそれぞれ特有の特徴や用途に合わせて設計されており、プロジェクトのニーズや開発者の好みによって選択されることがあります。選択肢を検討する際には、ドキュメンテーションやコミュニティの活発さ、過去の実績なども考慮すると良いでしょう。
TypeScriptとバックエンド開発

TypeScriptは、JavaScriptのスーパーセットであり、静的型付けをサポートするプログラミング言語です。TypeScriptは主にフロントエンド開発において人気がありますが、バックエンド開発にも利用されています。以下は、TypeScriptを使用したバックエンド開発においてExpress、およびNestJSとの関連性についての簡単な説明です。
TypeScriptとバックエンド開発

ExpressはNode.jsのWebアプリケーションフレームワークであり、シンプルで柔軟な構造を提供します。ExpressアプリケーションをTypeScriptで書くことで、より安全かつ保守しやすいコードを実現できます。
TypeScriptとバックエンド開発

NestJSは、エレガントで効果的なNode.jsフレームワークであり、Angularの影響を受けています。NestJSは、TypeScriptをサポートし、デコレータやモジュールのシステムを使用して、コードの構造を明確にし、開発を容易にします。
TypeScriptとバックエンド開発

これらの例は、TypeScriptを使用してExpress、およびNestJSでバックエンドを開発するための基本的な構造を示しています。各フレームワークやライブラリは異なる特性を持っていますが、TypeScriptを組み合わせることで、コードの品質や保守性を向上させることができます。
.d.ts

.d.tsファイルは、TypeScriptの型宣言ファイルであり、通常、外部のJavaScriptライブラリをTypeScriptで使用する際に使用します。.d.tsファイルは、JavaScriptライブラリの関数、クラス、オブジェクト、変数などの名前と型情報を提供し、TypeScriptがこれらのライブラリをより安全に使うことができるようにします。
.d.ts

例えば、外部ライブラリの関数に渡す引数の型に対して、TypeScript のコンパイラは検査を実行します。もし、外部ライブラリを使用しているコードの中で、渡された引数が予期される型と異なっている場合、TypeScriptはコンパイル時にエラーを報告します。
.d.ts

.d.tsファイルは、手動で作成することもできますが、もしライブラリがnpmパッケージである場合、@typesスコープに公開されている別のパッケージから、簡単に取得することができます。例えば、lodashライブラリをTypeScriptで使用する際には、@types/lodashパッケージをインストールすることによって、.d.tsファイルを手動で作成する代わりに、TypeScriptが自動的に型情報を認識できます。
制御構造

TypeScriptは、JavaScriptと同じ制御構造の構文を持ちます。
制御構造

型アノテート以外は、JavaScriptと違いはありません。
制御構造

スプライス構文 [..."XYZ"] を使うには
制御構造

とES2015以降をターゲットに指定する必要がありました。
制御構造

ES2015以前で、スプライス構文相当のことを行うには
制御構造

を
制御構造

に置換えます。これで、同じ
制御構造

となります。
制御構造

スプライス構文は、他にも引数リストなどでも使えるので、この方法が全てのスプライス構文の置換えにはなりません。
制御構造

ちなみに Babal は、
制御構造

から
制御構造

を生成します。
tsconfig.json 

tsc は、tsconfig.json で動作を変える事ができます。
tsconfig.json 

最初は
tsconfig.json 

とすると雛形が生成されます。
tsconfig.json 

設定項目(一部):
附録

二分法
附録

このコードは、JavaScriptで Hello クラスを定義し、そのクラスを使ってテストを行うためのコードです。Hello クラスは、挨拶文を扱うクラスであり、挨拶文に含める文字列を引数として受け取ります。引数が省略された場合、デフォルトで "world" という文字列を含めます。
附録

Hello クラスには、toString() メソッドと print() メソッドがあります。toString() メソッドは、"Hello [挨拶文に含める文字列]!" という文字列を返し、print() メソッドは、挨拶文に含める文字列をコンソールに出力します。
附録

また、main() 関数を定義し、この関数を呼び出すことで、Hello クラスを使って挨拶文を作成してコンソールに出力するテストを行うことができます。main() 関数の中では、Hello クラスのインスタンスを2つ作成し、それぞれの toString() メソッドと print() メソッドを呼び出しています。また、Hello クラスの constructor.name プロパティをコンソールに出力して、クラス名が取得できることを確認しています。