TypeScriptは、Microsoftが開発したJavaScriptを基盤とした言語です。
この投稿では、JavaScriptの概要、TypeScriptがJavaScriptをどのように拡張するか、そしてTypeScriptが解決する問題について、技術的な詳細を避けて説明します。

JavaScriptとは何か？

TypeScriptはJavaScriptを拡張するため、JavaScriptから説明を始めると良いでしょう。JavaScriptは、一般的にウェブサイトを作成するために使用されます。ウェブサイトを構築する際には、HTML、CSS、JavaScript（JS）の3つの言語を使用します。大まかに言えば、HTMLはページに表示されるコンテンツを定義し、CSSはページの視覚的なスタイルを定義し、JSはページのインタラクティブな動作を定義します。

これらのスキルセットを持つことを「フロントエンド」開発者と呼びます。Safari、Firefox、Edge、Chromeなどのウェブブラウザ内でページを作成するために、3つの言語を使用します。商業や情報共有においてウェブがいかに普及しているかを考えると、これらの3つの言語を熟知した人材に対する需要は非常に大きいです。

「フロントエンド」開発者の役割に関連して、「バックエンド」開発者のスキルセットがあります。これは、ウェブブラウザ（HTML/CSS/JSを渡すことによって）または別のサービス（より直接的にデータを送信することによって）と通信するコンピュータサービスを作成することです。このタイプのコードを書くためにHTML、CSS、またはJSを使用する必要はありませんが、通常はウェブブラウザで表示される可能性が高いため、最終製品になります。

プログラミング言語は何をするのか？

プログラミング言語は、人間とコンピュータがコミュニケーションするための手段です。人々はコードを書くよりもはるかに多くの回数コードを読みます。そのため、開発者は、少量のコードで特定の問題を解決するのに優れたプログラミング言語を作成します。JavaScriptを使用した例を以下に示します。

var name = "Danger"
console.log("Hello, " + name)

最初の行は変数（他のものを格納できる箱のようなもの）を作成し、2行目はコンソール（例えばDOSやターミナル）にテキスト `"Hello, Danger"` を出力します。

JavaScriptはスクリプト言語として動作するように設計されており、コードはファイルの一番上から始まり、一行ずつ下に向かって実行されます。対照的に、異なる言語制約で構築されたJavaでは、同じ動作は以下のようになります。

class Main {
  public static void main(String[] args) {
    String name = "Danger";
    System.out.println("Hello, " + name);
  }
}

これらの2つのコードサンプルは同じことを行いますが、Javaのバージョンには、コンピュータに正確に何をすべきかを伝えることとは必ずしも関係のない多くの単語が含まれています（例：`class Main {`、`public static void main(String[] args) {`、そして2つの余分な `}`）。また、一部の行の最後にセミコロンがあります。これらのプログラミング言語のどちらにも間違いはありませんが、JavaはJavaScriptとは異なるものを構築することを目的としており、これらの追加のコードはJavaアプリを構築するという制約の中で意味があります。

しかし、重要なポイントに進むために、比較したい注目すべき行が1つあります。

// JavaScript
var name = "Danger"

// Java
String name = "Danger";

これらの行はどちらも、値 `"Danger"` を含む `name` という名前の変数を宣言しています。

JavaScriptでは、変数を宣言するために `var` という省略形を使用します。一方、Javaでは、変数がどのような種類のデータを含むかを指定する必要があります。この場合、変数は `String` を含みます。（文字列は、文字の集まりを表すプログラミング用語です。それらは `"このように見えます"`。 もっと知りたい場合は、この5分のビデオが参考になります。）

これらの変数はどちらも文字列を含んでいますが、Javaでは変数は常に文字列しか含むことができません。なぜなら、変数を作成したときにそう指定したからです。JSでは、変数は数値や日付のリストなど、何でも変更できます。

例を示します。

// Before in JS
var name = "Danger"
// Also OK
var name = 1
var name = false
var name = ["2018-02-03", "2019-01-12"]

// Before in Java
String name = "Danger";
// Not OK, the code wouldn't be accepted by Java
String name = 1;
String name = false
String name = new String[]{"2018-02-03", "2019-01-12"};

これらのトレードオフは、これらの言語が1995年に作成されたコンテキストにおいて理にかなっています。JavaScriptは元々、ウェブサイト上で簡単なインタラクションを処理する小さなプログラミング言語として設計されました。一方、Javaは、あらゆるコンピュータ上で実行できる複雑なアプリを作成するために特別に構築されました。彼らは異なる規模のコードベースを構築するために使用されることを期待していたため、言語はプログラマに異なる種類のコードを書かせる必要がありました。

Javaは、人々が構築することを期待していたプログラムがより複雑だったため、プログラマに変数の値をより明確に記述することを要求しました。一方、JavaScriptは、詳細情報を省略することで可読性を優先し、コードベースが大幅に小さくなることを期待していました。

TypeScriptとは何か？

TypeScriptはプログラミング言語であり、JavaScriptのすべてと、さらに少しが含まれています。上記の例を使用して、JavaScriptとTypeScriptの「Hello, Danger」スクリプトを比較してみましょう。

// JavaScript
var name = "Danger"
console.log("Hello, " + name)

// TypeScript
var name = "Danger"
console.log("Hello, " + name)

// Yep, you're not missing something, there's no difference

TypeScriptの目標はJavaScriptを拡張することだけであるため、既存のJavaScriptコードはTypeScriptとして機能します。TypeScriptがJavaScriptに追加する拡張機能は、Javaのように、コードで使用されるデータの種類をより明確に記述するのに役立つことを目的としています。

これは同じサンプルですが、変数が何かをより明確にするためにTypeScriptを使用しています。

var name: string = "Danger"
console.log("Hello, " + name)

この追加の `: string` によって、`name` が文字列だけであることを読者は確実に知ることができます。このように変数を注釈付けすることで、TypeScriptはそれらが一致することを検証できます。これは非常に役立ちます。なぜなら、変数の値の種類のような変更を追跡することは、1つか2つの場合簡単そうですが、数百に達すると、追跡するのが難しくなるからです。型を記述することは、プログラマがコードについてより自信を持つのに役立ちます。なぜなら、型によって間違いが検出されるからです。

簡単に言えば、これらの注釈を「型」と呼びます。したがって、名前はTypeScriptです。TypeScriptのタグラインの1つは「スケールするJavaScript」であり、これらの追加の型注釈により、より大きなプロジェクトに取り組むことができるという主張です。これは、コードの正確さを事前に検証できるためです。つまり、すべての変更がプログラムの残りの部分にどのように影響するかを理解する必要性が少なくなります。

90年代、そしておそらく5〜10年前までは、JavaScriptアプリケーションに型がないことのトレードオフは問題ありませんでした。なぜなら、構築されているプログラムのサイズと複雑さは、ウェブサイトのフロントエンドに限定されていたからです。しかし今日では、JavaScriptはほぼあらゆる場所で、コンピュータ上で実行されるほぼすべてのものを構築するために使用されています。多くのモバイルアプリやデスクトップアプリは、内部的にJavaScriptとWebテクノロジーを使用しています。

これらはすべて、構築して理解するのがはるかに複雑ですが、型を追加することで、これらのプログラムへの改善を行う複雑さを大幅に削減できます。

TypeScriptで解決できる問題とは何か？

通常、コードにバグがないことを確認する必要があるのは、自動化されたテストを作成し、コードが期待通りに動作することを手動で検証し、最後に別の人がそれが正しいことを検証することによって処理できます。

Microsoftほどの規模の企業は多くありませんが、大規模なコードベースでJavaScriptを作成する際の多くの問題は同じです。多くのJavaScriptアプリは、数十万ものファイルで構成されています。1つのファイルへの単一の変更は、他の多数のファイルの動作に影響を与える可能性があり、池に小石を投げ込むと、波紋が岸辺に広がるようなものです。

プロジェクトのすべての部分間の接続を検証することはすぐに時間がかかるようになりますが、TypeScriptのような型チェック言語を使用すると、開発中に自動的に処理し、即時のフィードバックを提供できます。

これらの機能により、TypeScriptは開発者がコードに自信を持つことができ、プロジェクトを誤って壊していないことを検証する時間を大幅に節約できます。