TypeScriptとJavaScriptの関係と前提理解
TypeScriptは「JavaScriptを拡張した言語」で、よく「JavaScriptのスーパーセット」と呼ばれます。つまり、JavaScriptで書けることは基本的にすべてTypeScriptでも書けて、そこに「型チェック」などの追加機能が乗っているイメージです。最終的にはTypeScriptのコードはコンパイルされて、普通のJavaScriptに変換されてからブラウザやNode.jsで実行されます。
ここで大事なのは、TypeScriptは「JavaScriptとは別物」ではなく、「JavaScriptに型という安全装置を足したもの」という位置づけだということです。なので、TypeScriptを学ぶ前提として、変数、関数、if文、for文、配列、オブジェクトといったJavaScriptの基礎は、少なくとも「読める」くらいにはしておくとかなり楽になります。
開発環境としては、VS Codeのようなエディタと、Node.js、そしてTypeScriptコンパイラ（tsc）を使うのが一般的です。TypeScriptコンパイラが、.ts ファイルを .js に変換し、その過程で型チェックも行ってくれます。VS CodeはTypeScriptの型情報を活用して、補完やエラー表示を強力にしてくれるので、初心者にもかなり心強い相棒になります。
JavaScriptとTypeScriptの一番大きな違い：型の扱い
動的型付け（JavaScript）と静的型付け（TypeScript）
JavaScriptは「動的型付け」の言語です。変数にどんな型の値を入れるかを事前に宣言する必要はなく、実行時に値が決まります。たとえば、次のようなコードはJavaScriptでは普通に動きます。
let value = 10; // ここでは数値
value = "hello"; // 途中で文字列に変わる
この柔軟さは便利ですが、「本当は数値を想定していたのに、いつの間にか文字列が入っていてバグになった」といった問題を引き起こしやすくなります。エラーに気づくのは、たいてい「実行してみてから」です。
一方、TypeScriptは「静的型付け」です。変数や関数の引数・戻り値などに型を決めておき、その型に合わない使い方をすると、コンパイル時にエラーとして教えてくれます。これにより、実行前に多くのバグを潰すことができます。
同じようなコードをTypeScriptで書くと、次のようになります。
let value: number = 10;
value = "hello"; // コンパイルエラー
ここでは value に number 型を宣言しているので、文字列を代入しようとした時点でTypeScriptコンパイラが「それはおかしい」と教えてくれます。この「事前に間違いを指摘してくれる」仕組みが、TypeScriptの一番の特徴です。
型注釈と型推論の違いと役割
TypeScriptでは、変数や関数に「型注釈」を書くことができます。
let age: number = 20;
let name: string = "Taro";
let isStudent: boolean = true;
このように書くことで、「この変数にはこの型の値しか入れません」と宣言できます。これがJavaScriptとの大きな違いで、JavaScriptにはこのような型注釈の仕組みはありません。
ただし、毎回すべての変数に型を書く必要はありません。TypeScriptには「型推論」があり、初期値から自動的に型を推測してくれます。
let age = 20; // number 型と推論される
let name = "Taro"; // string 型と推論される
この場合も、あとから age = "二十歳"; と書くとエラーになります。TypeScriptは「最初にどんな値が入ったか」から型を推論し、その型に反する代入を禁止することで、コードの安全性を高めています。
JavaScriptでは同じコードを書いても、型チェックは行われず、実行時までエラーが分からないことが多いです。TypeScriptは「コンパイル時に型チェックを行う」という点で、JavaScriptとは根本的に違う性質を持っています。
文法レベルでの違いと共通点
変数宣言の違いと共通点
JavaScriptとTypeScriptは、let や const といった変数宣言のキーワードは共通です。違いは「型を書くかどうか」です。
JavaScriptでは次のように書きます。
let count = 0;
const title = "Hello";
TypeScriptでは、必要に応じて型を明示できます。
let count: number = 0;
const title: string = "Hello";
どちらも最終的にはJavaScriptに変換されるので、実行時の挙動は同じですが、TypeScriptではコンパイル時に「countは数値」「titleは文字列」という情報が分かるため、エディタの補完やエラー検出が強力になります。
初心者目線で言うと、「JavaScriptの書き方に、必要なところだけ型を足していく」のがTypeScriptだと考えると分かりやすいです。
関数の違い：引数と戻り値の型
JavaScriptでは、関数の引数や戻り値に型を指定しません。
function add(a, b) {
return a + b;
}
この関数に add("3", 5) のように文字列と数値を渡しても、JavaScriptは実行してみるまで何も言いません。結果として "35" になったり、意図しない挙動をすることがあります。
TypeScriptでは、引数と戻り値に型を指定できます。
function add(a: number, b: number): number {
return a + b;
}
const result = add(3, 5); // OK
const wrong = add("3", 5); // コンパイルエラー
ここでは、「aとbはnumber型」「戻り値もnumber型」という契約を型で表現しています。この契約に反する呼び出しをすると、コンパイル時にエラーになります。
この違いは、コードの規模が大きくなるほど効いてきます。JavaScriptでは「この関数、何を受け取って何を返すんだっけ？」とコードを追いかける必要がありますが、TypeScriptでは型定義を見れば一目で分かります。
オブジェクトとクラスの違い
JavaScriptでもオブジェクトやクラスは使えますが、型の概念はありません。
JavaScriptのオブジェクトは次のように書きます。
const user = {
name: "Taro",
age: 20
};
ここで user.age = "二十歳"; と書いても、JavaScriptは何も言いません。
TypeScriptでは、オブジェクトの形と型を定義できます。
const user: {
name: string;
age: number;
} = {
name: "Taro",
age: 20
};
user.age = "二十歳"; // コンパイルエラー
このように、「このオブジェクトはこういうプロパティを持ち、それぞれの型はこれ」という情報を型として表現できます。
クラスについても同様で、TypeScriptではクラスのプロパティやメソッドに型を付けることができ、アクセス修飾子などのオブジェクト指向的な機能も強化されています。これにより、大規模なアプリケーションでも構造を明確に保ちやすくなります。
実行タイミングとエラー検出の違い
JavaScriptは「実行してみないと分からない」世界
JavaScriptでは、コードの多くの問題は「実行して初めて分かる」ことが多いです。たとえば、存在しないプロパティにアクセスしたり、想定と違う型の値が入っていたりしても、実行するまでエラーになりません。
function greet(user) {
console.log("Hello, " + user.name);
}
greet({ namae: "Taro" }); // プロパティ名を間違えているが、実行時まで分からない
このコードは、user.name が undefined になり、実行時に意図しない挙動をします。
TypeScriptは「実行前にかなりの範囲をチェックできる」
同じようなコードをTypeScriptで書くと、次のようになります。
function greet(user: { name: string }) {
console.log("Hello, " + user.name);
}
greet({ namae: "Taro" }); // コンパイルエラー
ここでは、greet の引数 user に「nameという文字列プロパティを持つオブジェクト」という型を指定しています。そのため、namae という間違ったプロパティ名を渡した時点で、コンパイルエラーになります。
このように、TypeScriptはコンパイル時に型チェックを行い、JavaScriptでは実行時まで気づけないようなエラーを事前に検出できます。これが、TypeScriptが「大規模開発に向いている」と言われる大きな理由のひとつです。
開発体験の違い：エディタ補完とリファクタリング
JavaScriptだけのときの開発体験
JavaScriptだけでも、VS Codeなどのエディタはある程度の補完をしてくれますが、型情報がないため、補完の精度やエラー検出には限界があります。特に大きなプロジェクトでは、「このオブジェクト、どんなプロパティがあったっけ？」とコードを行ったり来たりすることが増えます。
TypeScriptを使ったときの開発体験
TypeScriptでは、型情報があることで、エディタが「この変数はこの型」「このオブジェクトはこういうプロパティを持つ」と理解できます。その結果、プロパティ名の補完、関数の引数候補、戻り値の型などがエディタ上で即座に分かります。
たとえば、次のようなコードがあるとします。
type User = {
name: string;
age: number;
};
function printUser(user: User) {
console.log(user.name);
}
ここで user. と打った瞬間に、エディタが name と age を候補として出してくれます。プロパティ名をタイプミスした場合も、その場でエラーとして表示されます。
また、型情報があることで、リファクタリング（変数名や関数名の変更、構造の変更）も安全に行いやすくなります。型に反する変更をするとコンパイルエラーになるため、「どこかで壊してしまったかもしれない」という不安が減ります。
初心者が意識すると良いポイント
「JavaScriptに型を足しているだけ」と思う
最初から「TypeScriptは難しい新しい言語」と構えすぎると、学習が重く感じます。実際には、「JavaScriptの書き方に、必要なところだけ型を足しているだけ」です。
まずは、普段のJavaScriptコードに対して、次のようなことを意識してみると良いです。
変数に「これは数値」「これは文字列」と型を付けてみる。
関数に「この引数は何型」「戻り値は何型」と書いてみる。
オブジェクトに「このプロパティは何型」と型を定義してみる。
こうして少しずつ「型のある世界」に慣れていくと、TypeScriptのメリットが体感として分かってきます。
「エラーは怒られているのではなく、守られている」と捉える
TypeScriptを使い始めると、「エラーがいっぱい出てうんざりする」と感じることがあります。けれど、そのエラーは「あなたの代わりに、将来のバグを先に見つけてくれている」サインです。
JavaScriptだけで書いていると、実行してから「なんでここで落ちるんだ…」と悩む時間が増えます。TypeScriptは、その時間を「コンパイル時のエラー修正」に前倒ししてくれているだけです。
初心者ほど、スペルミスや型の勘違いが起きやすいので、TypeScriptはむしろ「優しい先生」だと思って付き合うと、学習効率がかなり上がります。
まとめ：JavaScriptとの違いを一言で言うと
JavaScriptとTypeScriptの一番大きな違いは、「型を意識するかどうか」「エラーをいつ見つけるか」です。
JavaScriptは、柔軟で書き始めやすい反面、実行してみるまで多くのバグに気づけません 。
TypeScriptは、JavaScriptをベースにしつつ、静的型付けとコンパイル時の型チェックを導入することで、コードの安全性・可読性・保守性を高めています。
次のステップとしては、実際に小さなTypeScriptファイルを書いて、tsc でコンパイルしてみるのがおすすめです。同じ処理をJavaScriptとTypeScriptで書き比べてみると、「型があると何が違うのか」が、感覚としてつかめてきます。