第0章: TypeScriptへようこそ

JavaScriptの経験がある皆さん、TypeScriptの世界へようこそ。 この章では、TypeScriptがどのような言語であるか、なぜ現代のWeb開発のスタンダードとなっているのかを理解し、実際に開発環境を整えて最初のコードを実行するところまでを学びます。

TypeScriptとは？

TypeScriptは、Microsoftによって開発されているオープンソースのプログラミング言語です。一言で言えば、「型（Type）を持ったJavaScript」です。

重要な特徴は以下の通りです：

• JavaScriptのスーパーセット（上位互換）: すべての有効なJavaScriptコードは、有効なTypeScriptコードでもあります。つまり、今日から既存のJS知識をそのまま活かせます。
• 静的型付け: JavaScriptは実行時に変数の型が決まる「動的型付け言語」ですが、TypeScriptはコンパイル時（コードを書いている途中やビルド時）に型をチェックする「静的型付け言語」としての性質を持ちます。
• コンパイル（トランスパイル）: ブラウザやNode.jsはTypeScriptを直接理解できません。TypeScriptコンパイラ（tsc）を使って、標準的なJavaScriptファイルに変換してから実行します。

なぜTypeScriptか？

「わざわざ型を書くのは面倒だ」と感じるかもしれません。しかし、中〜大規模な開発においてTypeScriptは以下の強力なメリットを提供します。

1. 型安全性（バグの早期発見）: undefined のプロパティを読み取ろうとしたり、数値を期待する関数に文字列を渡したりするミスを、コードを実行する前にエディタ上で警告してくれます。
2. 強力なエディタサポート: VS Codeなどのエディタでは、型情報に基づいた正確なコード補完（IntelliSense）が効きます。APIの仕様をドキュメントで調べなくても、ドット.を打つだけで利用可能なメソッドが表示されます。
3. リファクタリングの容易さ: 変数名や関数名を変更する際、型情報があるおかげで、影響範囲を自動的に特定し、安全に一括置換できます。

環境構築

このウェブサイト上ではブラウザ上でコードを実行できる環境を埋め込んでおり、特別なセットアップは不要です。

手元の環境でTypeScriptを実行したい場合は、以下の例のようにTypeScriptを動かす環境をインストールすることができます。

プロジェクトの作成とTypeScriptのインストール

今回はローカル環境にTypeScriptをインストールする方法を採用します。適当なディレクトリを作成し、ターミナルで以下のコマンドを実行してください。

※あらかじめ Node.js がインストールされていることを前提とします。

# プロジェクトフォルダの作成と移動
mkdir ts-tutorial
cd ts-tutorial

# package.jsonの初期化
npm init -y

# TypeScriptのインストール（開発用依存関係として）
npm install --save-dev typescript

インストールが完了したら、バージョンを確認してみましょう。

npx tsc --version
# Output: Version 5.x.x (バージョンは時期によります)

Note: 実際にウェブアプリケーションを開発する際には、Viteなどのフレームワークをセットアップする際に自動的にTypeScriptもインストールされるため、このように手動でTypeScriptをインストールする必要はない場合が多いです。

最初のTypeScript

いよいよ最初のTypeScriptコードを書いてみましょう。

コードの記述

エディタで hello.ts というファイルを作成し、以下のコードを記述します。 JavaScriptと似ていますが、変数宣言の後ろに : string という「型注釈（Type Annotation）」が付いている点に注目してください。

// 変数messageにstring型（文字列）を指定
const message: string = "Hello, TypeScript World!";

// 数値を渡そうとするとエディタ上でエラーになります（後ほど解説）
console.log(message);

コンパイルと実行

このままではNode.jsで実行できないため、JavaScriptにコンパイルします。

npx tsc hello.ts

エラーが出なければ、同じフォルダに hello.js というファイルが生成されています。中身を確認すると、型注釈が取り除かれた普通のJavaScriptになっているはずです。

生成されたJSファイルをNode.jsで実行します。

Hello, TypeScript World!

これがTypeScript開発の基本的なサイクル（記述 → コンパイル → 実行）です。

このウェブサイト上の実行環境ではコードを編集して実行ボタンを押すとjsファイルへのコンパイルと実行がまとめて行われます。 またコンパイル後のjsファイルの内容も以下のように確認できます。

"use strict";
// 変数messageにstring型（文字列）を指定
const message = "Hello, TypeScript World!";
// 数値を渡そうとするとエディタ上でエラーになります（後ほど解説）
console.log(message);

tsconfig.json: コンパイラの設定

毎回 npx tsc hello.ts のようにファイル名を指定するのは手間ですし、プロジェクト全体の設定も管理しづらくなります。そこで、tsconfig.json という設定ファイルを使用します。

tsconfig.json ファイルがない場合は以下のコマンドで初期設定ファイルを生成します。

npx tsc --init

生成された tsconfig.json には、TypeScriptコンパイラの動作を制御する様々な設定が含まれています。

特に重要なのは strict オプションです。 strict: true を有効にすると、TypeScriptの厳密な型チェックが有効になります。これにより、コードの品質が向上し、潜在的なバグを早期に発見できます。逆に、strict を無効にすると、型安全性が低下し、型関連のエラーが見逃される可能性があります。

それ以外のオプションはプロジェクトの要件に応じて適宜設定してください。

Note: my.code();のサイト上の実行環境で使用されている設定は、以下の通りです。

{
  "compilerOptions": {
    "target": "ES2023",
    "lib": ["ESNext", "WebWorker"],
    "strict": true
  }
}

設定ファイルを使ったコンパイル

tsconfig.json があるディレクトリでは、ファイル名を指定せずに以下のコマンドだけで、ディレクトリ内のすべてのTypeScriptファイルが設定に基づいてコンパイルされます。

npx tsc