TypeScript入門：JavaScriptとの違いと導入のメリットをわかりやすく解説

TypeScriptとは何か？

TypeScriptは「JavaScriptに型を追加したスーパーセット」です。つまり、JavaScriptで書けるコードはすべてTypeScriptでも書けますし、さらに型安全性や開発支援機能を追加できます。

特徴

• JavaScriptに型（Type）を追加
• 型エラーをコンパイル時に検出
• クラス、インターフェース、ジェネリクスなどの強力な構文サポート
• JavaScriptへのトランスパイルが必須（tsc コマンドなど）

JavaScriptとの主な違い

1. 静的型付けの有無

JavaScript（動的型付け）

let message = "Hello";
message = 123; // 実行時までエラーにならない

TypeScript（静的型付け）

let message: string = "Hello";
message = 123; // エラー：型 'number' を型 'string' に割り当てることはできません。

2. 型アノテーション（Type Annotation）

TypeScriptでは変数や関数の引数、戻り値に明示的に型を指定できます。

function greet(name: string): string {
    return "Hello, " + name;
}

3. インターフェースと型チェック

interface User {
    id: number;
    name: string;
}

const user: User = {
    id: 1,
    name: "Naoki",
};

4. コンパイルが必要

TypeScriptはそのままではブラウザで動作しません。JavaScriptに変換（トランスパイル）する必要があります。

tsc hello.ts

TypeScript導入のメリット

1. バグの早期発見

型チェックによって、実行前にミスに気づけるため、実行時エラーの数を大きく減らせます。

2. 開発体験の向上

VSCodeなどのエディタで、補完機能・型定義の確認・ナビゲーションが強化されます。

user. // 補完候補に `id` や `name` が表示される

3. 大規模開発・チーム開発に強い

型定義があることでコードの意図が明確になり、ドキュメント不要でも読みやすく、安全に変更できます。

4. 保守性の向上

リファクタリングや将来的な機能追加の際、型エラーで影響範囲を把握しやすくなります。

TypeScriptの導入方法（簡単ステップ）

1. 初期化

npm init -y
npm install typescript --save-dev
npx tsc --init

2. .ts ファイルを作成

// index.ts
const greet = (name: string): string => {
    return `Hello, ${name}`;
};

console.log(greet("TypeScript"));

3. コンパイル

npx tsc

4. 実行

node index.js

まとめ：TypeScriptは「保守性」と「安心感」のあるJavaScript

TypeScriptは「型」を明示することで、JavaScriptの弱点を補い、大規模・長期的な開発にとても向いています。最初はやや取っ付きにくいかもしれませんが、小さなプロジェクトやユーティリティ関数から取り入れてみるのもおすすめです。ぜひTypeScriptの力を体感してみてください。