【TypeScript入門】第1回：TypeScriptの基礎～導入と環境構築

導入

ようこそ、TypeScriptの世界へ！この「TypeScript徹底入門」シリーズでは、現代のWeb開発に不可欠なTypeScriptの基礎から応用までを、実践的に学んでいきます。

第1回となる今回は、TypeScriptの「導入と環境構築」に焦点を当てます。TypeScriptがどのようなものかを知り、開発に必要な環境を整え、実際に簡単なTypeScriptコードを実行するところまでを行います。TypeScriptを学ぶ準備をここから始めていきましょう。

メイン解説

TypeScriptとは何か？

TypeScriptは、Microsoftが開発したオープンソースのプログラミング言語です。JavaScriptに「静的型付け」の概念を加えた「JavaScriptのスーパーセット」として知られています。

静的型付けとは、変数の型（数値、文字列など）を事前に指定し、コードの記述時にその型が正しく使われているかをチェックする仕組みのことです。これにより、開発中に潜在的なエラーを早期に発見できるようになり、大規模なアプリケーション開発や複数人での開発において、コードの信頼性や保守性を大きく向上させることができます。

ブラウザやNode.jsといったJavaScriptが動作する環境では、TypeScriptコードを直接実行することはできません。TypeScriptで書かれたコードは、最終的に「コンパイル」という過程を経て、通常のJavaScriptコードに変換されてから実行されます。

開発環境の準備

TypeScriptを動かすために、以下のツールをインストールします。

1. Node.jsのインストール

   TypeScriptのコンパイラはNode.js上で動作します。まだインストールしていない場合は、公式サイトからインストーラーをダウンロードしてインストールしてください。

   • Node.js公式サイト

   インストール後、コマンドプロンプトやターミナルを開き、以下のコマンドを実行してバージョンが表示されることを確認します。

   node -v
   npm -v
   

   node -vでNode.jsのバージョン、npm -vでNode.jsに付属するパッケージマネージャーnpmのバージョンが表示されれば成功です。

2. TypeScriptコンパイラのインストール

   Node.jsがインストールされていれば、npmを使ってTypeScriptコンパイラを簡単にインストールできます。以下のコマンドを実行してください。

   npm install -g typescript
   

   このコマンドは、typescriptパッケージをグローバル（PC全体）にインストールします。これにより、どのプロジェクトからでもtscコマンドを使えるようになります。

   インストール後、以下のコマンドでTypeScriptコンパイラのバージョンを確認します。

   tsc -v
   

   バージョンが表示されれば、TypeScriptコンパイラのインストールは完了です。

3. 開発エディタの準備（VS Code推奨）

   プログラミングには、コードを書くためのエディタが必要です。TypeScript開発には、Microsoftが提供する「Visual Studio Code (VS Code)」が強く推奨されます。VS CodeはTypeScriptに対する強力なサポートを内蔵しており、型チェックの表示やコード補完などが非常に使いやすいです。

   • Visual Studio Code公式サイト

   VS Codeをインストールし、基本的な操作に慣れておきましょう。

初めてのTypeScriptコード

環境構築が完了したら、実際にTypeScriptのコードを書いてみましょう。

1. プロジェクトフォルダの作成

   PCの任意の場所に、新しいフォルダを作成します。例えば、typescript-introという名前のフォルダを作成し、VS Codeでそのフォルダを開きます。

2. TypeScriptファイルの作成

   typescript-introフォルダの中に、hello.tsという名前の新しいファイルを作成します。.tsという拡張子がTypeScriptファイルを示します。

   hello.tsに以下のコードを記述してください。

   // hello.ts
   let message: string = "Hello, TypeScript!";
   console.log(message);
   

   ここで注目すべきは、message: stringという部分です。これは、messageという変数が文字列型（string）であることを明示的に宣言しています。これがTypeScriptの「型注釈」です。

3. TypeScriptコードのコンパイル

   VS Codeのターミナル（Ctrl + Shift + @または表示 > ターミナル）を開き、hello.tsがあるフォルダで以下のコマンドを実行します。

   tsc hello.ts
   

   このコマンドを実行すると、hello.tsと同じフォルダ内にhello.jsというファイルが新しく生成されます。これが、TypeScriptからJavaScriptへ変換されたファイルです。hello.jsの中身を見てみましょう。

   // hello.js
   var message = "Hello, TypeScript!";
   console.log(message);
   

   hello.tsで記述した型注釈(: string)が取り除かれ、標準的なJavaScriptのコードに変換されていることがわかります。

4. JavaScriptコードの実行

   生成されたhello.jsファイルを、Node.jsを使って実行します。ターミナルで以下のコマンドを実行してください。

   node hello.js
   

   ターミナルに「Hello, TypeScript!」と表示されれば成功です。

型エラーの体験

TypeScriptの最大の利点である「型チェック」を体験してみましょう。

hello.tsファイルを以下のように修正します。

// hello.ts
let age: number = 25;
// age = "twenty five"; // この行のコメントを外してみましょう
console.log(age);

age: numberと指定しているので、age変数は数値型であるべきです。しかし、コメントアウトを外すと"twenty five"という文字列を代入しようとしています。

この状態でtsc hello.tsコマンドを実行すると、ターミナルに以下のようなエラーメッセージが表示されます。

hello.ts:3:7 - error TS2322: Type '"twenty five"' is not assignable to type 'number'.

これは、「"twenty five"という型はnumber型に割り当てることができません」という型エラーをTypeScriptが検知したことを示しています。VS Codeを使っている場合、コードエディタ上でもエラーがハイライト表示されるはずです。

このように、TypeScriptはコードを実行する前に潜在的な型不一致エラーを教えてくれるため、バグの早期発見につながります。エラーを修正し、ageには数値型の値を代入するように直せば、コンパイルが成功します。

// hello.ts
let age: number = 25;
age = 30; // 数値を代入すればOK
console.log(age);

まとめ

今回は、TypeScriptの導入と環境構築、そして最初のTypeScriptコードの実行までを行いました。

• TypeScriptはJavaScriptに静的型付けを加えることで、より堅牢で保守しやすいコードを書くための言語です。
• Node.jsとTypeScriptコンパイラをインストールすることで、TypeScriptの開発環境が整います。
• TypeScriptコードはコンパイルによってJavaScriptコードに変換され、実行可能になります。
• TypeScriptの型チェックにより、コード実行前に型に関するエラーを発見できることを体験しました。

これで、TypeScript学習の第一歩を踏み出すことができました。次回は、より具体的なTypeScriptの「基本的な型」について深く掘り下げていきます。お楽しみに！