TypeScriptとは？特徴・メリット・始め方を徹底解説【JavaScriptとの違い】

リンドくん

たなべ先生、最近「TypeScript」ってよく聞くんですが、これって何なんですか？JavaScriptとは違うんですか？

たなべ

TypeScriptはJavaScriptをもっと安全で使いやすくした言語なんだ。

TypeScriptとは何か？なぜ今注目されているのか

プログラミングを学んでいる方なら、「TypeScript」という言葉を一度は耳にしたことがあるのではないでしょうか？

TypeScriptは、Microsoftが開発したプログラミング言語で、簡単に言えば「型を持ったJavaScript」です。
JavaScriptの全ての機能に加えて、型システムという強力な機能が追加されています。

なぜTypeScriptが注目されているのか？その理由は明確です。

エラーを事前に発見できる - コードを実行する前にバグを見つけられます
開発効率が大幅に向上 - IDEの補完機能やリファクタリングが強力になります
大規模開発に適している - チーム開発や複雑なプロジェクトでも安心です
AI開発との親和性が高い - 現代のAI/機械学習フレームワークとの連携が容易です

特に最近では、フロントエンドエンジニアを目指す方にとって、TypeScriptは避けて通れない技術となっています。

JavaScriptとTypeScriptの決定的な違い

リンドくん

でも、JavaScriptでも十分プログラミングできますよね？何が違うんですか？

たなべ

確かにJavaScriptでも開発はできるよ。でも「型」があることで圧倒的に安全で効率的になるんだ。
具体例で見てみよう！

JavaScript（型なし）の場合

javascript

function calculateTotal(price, tax) {
    return price + tax;
}

// これは動くが...
console.log(calculateTotal(100, 10)); // 110

// こんなミスも動いてしまう！
console.log(calculateTotal("100", "10")); // "10010" (文字列結合)
console.log(calculateTotal(100)); // NaN (taxがundefined)

JavaScriptでは、間違った型の値を渡してもエラーにならず、予期しない結果になってしまいます。

TypeScript（型あり）の場合

typescript

function calculateTotal(price: number, tax: number): number {
    return price + tax;
}

// 正しい使用法
console.log(calculateTotal(100, 10)); // 110

// エラーが事前に検出される！
console.log(calculateTotal("100", "10")); // エラー: 文字列は渡せません
console.log(calculateTotal(100)); // エラー: 引数が足りません

TypeScriptでは、コードを書いている段階でエラーが表示されるため、バグを事前に防ぐことができます。

主な違いのまとめ

項目	JavaScript	TypeScript
型システム	動的型付け（実行時に型が決まる）	静的型付け（コンパイル時に型チェック）
エラー検出	実行時にエラーが発覚	開発時にエラーを発見
開発効率	IDE補完が限定的	強力な補完とリファクタリング
学習コスト	低い	やや高い（型の概念を学ぶ必要）
実行方法	ブラウザで直接実行	JavaScriptにコンパイルして実行

TypeScriptの基本的な型システム

TypeScriptの最大の特徴である「型システム」について、基本的な型から順番に見ていきましょう。

基本的なデータ型

typescript

// 数値型
let age: number = 25;
let pi: number = 3.14;

// 文字列型
let name: string = "田中太郎";
let message: string = `こんにちは、${name}さん`;

// 真偽値型
let isActive: boolean = true;
let isComplete: boolean = false;

// 配列型
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["田中", "佐藤", "鈴木"];

// ジェネリック記法での配列
let items: Array<string> = ["apple", "banana", "orange"];

オブジェクト型とインターフェース

typescript

// オブジェクト型の定義
interface User {
    id: number;
    name: string;
    email: string;
    isActive: boolean;
}

// インターフェースを使用
let user: User = {
    id: 1,
    name: "田中太郎",
    email: "tanaka@example.com",
    isActive: true
};

// 関数の引数としても使用
function displayUser(user: User): void {
    console.log(`ユーザー名: ${user.name}`);
    console.log(`メールアドレス: ${user.email}`);
}

関数の型定義

typescript

// 関数の型を明示的に定義
function add(a: number, b: number): number {
    return a + b;
}

// アロー関数での型定義
const multiply = (a: number, b: number): number => {
    return a * b;
};

// オプショナル引数（?を付ける）
function greet(name: string, age?: number): string {
    if (age) {
        return `こんにちは、${name}さん（${age}歳）`;
    }
    return `こんにちは、${name}さん`;
}