TypeScriptとは？

概要：このチュートリアルでは、TypeScriptとは何か、そして通常のJavaScriptに対する利点について理解します。

TypeScript入門

TypeScriptはJavaScriptのスーパーセットです。

TypeScriptはJavaScriptの上に構築されています。まず、TypeScriptのコードを記述します。次に、TypeScriptコンパイラを使用して、TypeScriptコードをプレーンなJavaScriptコードにコンパイルします。

プレーンなJavaScriptコードが作成されたら、JavaScriptが実行される任意の環境にデプロイできます。

TypeScriptファイルは、JavaScriptファイルの.js拡張子ではなく、.ts拡張子を使用します。

TypeScriptはJavaScriptの構文を使用し、型をサポートするための追加の構文を追加します。

構文エラーのないJavaScriptプログラムは、TypeScriptプログラムです。これは、すべてのJavaScriptプログラムがTypeScriptプログラムであることを意味します。これは、既存のJavaScriptコードベースをTypeScriptに移行する場合に非常に役立ちます。

次の図は、TypeScriptとJavaScriptの関係を示しています。

TypeScriptの主な目標は次のとおりです。

型は、多くのミスを回避するのに役立つことで生産性を向上させます。型を使用することにより、ランタイムで発生するのではなく、コンパイル時にバグを検出できます。

たとえば、次の関数は2つの数値xとyを加算します。

function add(x, y) {
   return x + y;
}Code language: JavaScript (javascript)

HTML入力要素から値を取得して関数に渡すと、予期しない結果になる可能性があります。

let result = add(input1.value, input2.value);
console.log(result); // result of concatenating stringsCode language: JavaScript (javascript)

たとえば、ユーザーが10と20を入力した場合、add()関数は30ではなく1020を返します。

理由は、input1.valueとinput2.valueが数値ではなく文字列であるためです。演算子+を使用して2つの文字列を加算すると、それらは1つの文字列に連結されます。

TypeScriptを使用して、このようにパラメータの型を明示的に指定する場合

function add(x: number, y: number) {
   return x + y;
}Code language: JavaScript (javascript)

この関数では、パラメータに数値型を追加しました。関数add()は、他の値ではなく、数値のみを受け入れます。

次のように関数を呼び出す場合

let result = add(input1.value, input2.value);Code language: JavaScript (javascript)

… TypeScriptコードをJavaScriptにコンパイルすると、TypeScriptコンパイラはエラーを発行します。したがって、ランタイムでエラーが発生するのを防ぐことができます。

TypeScriptは、現在のJavaScriptエンジン向けのES Nextで計画されている今後の機能をサポートしています。これは、Webブラウザ（または他の環境）がそれらを完全にサポートする前に、新しいJavaScript機能を使用できることを意味します。

毎年、TC39は、JavaScriptの標準であるECMAScriptのいくつかの新機能をリリースしています。機能提案は通常、5つの段階を経ます。

そして、TypeScriptは一般的にステージ3の機能をサポートしています。詳細については、TC39プロセスを確認してください。

このチュートリアルは役に立ちましたか？