第12章: TypeScriptとは？

第12章: TypeScriptとは？

概要

TypeScriptはMicrosoftによって開発された、JavaScriptに静的型付けを追加したプログラミング言語です。TypeScriptはJavaScriptの「スーパーセット」であり、JavaScriptの全ての機能を継承しながら、型システムや追加の言語機能を提供します。TypeScriptで書かれたコードは、コンパイル時に一般的なJavaScriptに変換されるため、ブラウザやNode.jsなどのJavaScript実行環境で動作します。

JavaScriptとTypeScriptの比較

JavaScriptとTypeScriptの主な違いを見ていきましょう：

主な違い

  • 型システム：TypeScriptの最大の特徴は静的型システムです。変数、関数のパラメータ、戻り値などに型を定義できます。
  • コンパイル処理：JavaScriptは直接実行されますが、TypeScriptは先にJavaScriptにコンパイルされる必要があります。
  • 開発時のエラー検出：TypeScriptは型チェックにより、実行前にコードの潜在的な問題を検出できます。
  • ツールのサポート：型情報のおかげで、IDEの入力補完や型ヒントなどが強化されます。

TypeScriptの型システム

TypeScriptの型システムを見てみましょう。以下のJavaScriptコードをTypeScriptに変換する例を示します：

JavaScript vs TypeScript

// JavaScript版
function greet(name) {
    return "Hello, " + name + "!";
}

const user = {
    name: "Alice",
    age: 30
};

console.log(greet(user.name));  // "Hello, Alice!"
console.log(greet(123));        // "Hello, 123!" - 警告なし

// TypeScript版
function greet(name: string): string {
    return "Hello, " + name + "!";
}

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

const user: User = {
    name: "Alice",
    age: 30
};

console.log(greet(user.name));  // "Hello, Alice!"
console.log(greet(123));        // エラー: 型 'number' の引数を型 'string' のパラメーターに割り当てることはできません。

上記の例では、TypeScript版では以下のような型指定を行っています：

TypeScriptの利点

  1. 型安全性：コンパイル時に型エラーを発見できるため、実行時エラーのリスクが減少します。
  2. コードの自己文書化：型定義がコードの理解を助け、関数やオブジェクトの使用方法が明確になります。
  3. リファクタリングの安全性：型チェックにより、大規模なコード変更時の影響範囲が把握しやすくなります。
  4. IDEサポートの向上：コード補完、定義へのジャンプ、リネームなどの機能が強化されます。
  5. 大規模プロジェクトへの適応性：チームでの開発や大規模アプリケーション開発において、保守性が向上します。

TypeScriptの基本的な型

// 基本的な型
let isDone: boolean = false;       // 真偽値型
let decimal: number = 6;           // 数値型
let color: string = "blue";        // 文字列型
let list: number[] = [1, 2, 3];    // 配列型
let tuple: [string, number] = ["hello", 10]; // タプル型

// any型（型チェックを回避する特殊な型）
let notSure: any = 4;
notSure = "maybe a string";
notSure = false;

// void型（戻り値がない関数の戻り値型）
function warnUser(): void {
    console.log("This is a warning message");
}

// null と undefined
let u: undefined = undefined;
let n: null = null;

// オブジェクト型
interface Point {
    x: number;
    y: number;
}
let point: Point = { x: 10, y: 20 };

// ユニオン型（複数の型のいずれかを持つ）
let id: string | number = 100;
id = "ID-100"; // OK

TypeScriptの導入方法

プロジェクトにTypeScriptを導入するには次のようにします：

# TypeScriptのインストール
npm install -g typescript

# 新規プロジェクトの初期化
tsc --init  # tsconfig.jsonファイルが生成される

# コンパイル
tsc          # .tsファイルを.jsファイルにコンパイル

# 監視モード（ファイル変更を検知して自動コンパイル）
tsc --watch

TypeScriptとJavaScriptの共存

既存のJavaScriptプロジェクトにTypeScriptを段階的に導入することも可能です。.jsファイルと.tsファイルを混在させることができ、徐々に型を追加していくアプローチを取ることができます。TypeScriptの設定ファイル（tsconfig.json）では、型チェックの厳格さのレベルも調整できます。

まとめ

TypeScriptは、JavaScriptに型安全性を追加することで、大規模なアプリケーション開発をより堅牢に、そして効率的にします。本章で学んだTypeScriptの基本概念は、次のステップとしてモダンなフロントエンド開発（React、Vue.js、Angularなど）を学ぶ際に非常に役立つでしょう。もしチームで開発を行ったり、より複雑なアプリケーションを構築したりする場合は、TypeScriptを導入することで多くの恩恵を受けることができます。

目次に戻る