TypeScriptとは何か？JavaScriptとの違いや使い方を実例で解説！(.tsファイルとtscの使い方)

現代のWeb開発において、TypeScriptの採用はもはや標準となりつつあります。

しかし、「名前は聞くけれど、どうしてJavaScriptではなく、TypeScriptを使うべきなの？」「実際の導入方法がわからない」という方もいるでしょう。

この記事では、TypeScriptの基本的な仕組みやJavaScriptとの違いを簡単に解説しています。

TypeScriptとは何か？

TypeScript（タイプスクリプト）は、Microsoftによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語です。

JavaScriptの「上位互換」のようなもので、大規模なWebアプリケーション開発などにおいて、より信頼性の高いコードを書くための機能が追加されています。

JavaScriptとの主な違い「静的型付け」

TypeScriptの最も重要な追加機能は「静的型付け（Static Typing）」です。

TypeScriptは、変数や関数の引数などがどのような型を持つかを事前に宣言します。

これにより、間違った型の値を代入しようとすると、プログラムを実行する前にエラーとして検出できるため、実行時の予期せぬエラーを未然に防ぐことができます。

▼JavaScriptとTypeScriptの比較

（補足）TSとJS

TypeScriptを略して「TS」、JavaScriptを略して「JS」と表記することもよくあります。

TypeScriptの歴史的な背景

当時のJavaScriptは、Webの進化に伴い大規模なアプリケーション開発にも使われるようになっていましたが、動的型付けの性質から、コードが複雑になるにつれてエラーの発見が困難になるという問題がありました。

そこで、この問題を解決し、大規模開発を容易にすることを目的に、Microsoftは既存のJavaScriptエコシステムと高い互換性を持ちつつ、型システムなどの堅牢性を加えたTypeScriptを開発し、2012年にリリースしました。

TypeScriptの処理の流れ

TypeScriptで書かれたコード（.tsファイル）は、ブラウザで直接実行できません。

トランスパイルという処理によって通常のJavaScriptコード（.jsファイル）に変換してから実行さする必要があります。

TypeScriptを使うために必要なもの

ファイルの拡張子を .ts に変更しただけでは、ブラウザなどで実行できるわけではありません。

TypeScriptを使うためには以下が必要となります。

Node.jsとnpm

TypeScriptはツールとして動作するため、開発環境の基盤となる Node.js が必要です。

Node.jsは、JavaScriptをブラウザ外で実行するための環境です。

npmは、Node.jsに付属するパッケージ管理ツールで、TypeScriptコンパイラをインストールするために使います。

TypeScriptコンパイラ (tsc)

TypeScriptコンパイラは、TypeScriptコードをJavaScriptに変換するツールです。

通常、プロジェクトのターミナルで以下のコマンドを実行してインストールします。

# プロジェクトごとにインストール
npm install --save-dev typescript

このインストールにより、tsc (TypeScript Compiler) コマンドが使用可能になります。

例えば、my-app.tsをJavaScritpにトランスパイルしたい場合はターミナルで以下のコマンドを実行します。

# my-app.ts を my-app.js に変換
npx tsc my-app.ts

npm install -g typescript

【実例】TypeScriptの使い方

以下に、JavaScriptとTypeScriptの違いがわかる簡単なコード事例を紹介します。

JavaScriptの場合

例えば、JavaScriptで人の名前を渡すと挨拶を返す関数があるとします。

JavaScriptの場合、引数personにどんな型の値を渡してもエラーにはなりません。これは柔軟ですが、開発者が誤って数値を渡した場合でもプログラムは動いてしまい、意図しない結果や後々バグの原因になることがあります。

function greet(person) {
  return "こんにちは、" + person;
}J

// 意図した通り: 文字列を渡す
let message1 = greet("アリス");
console.log(message1); // 出力: こんにちは、アリス

// 意図しない間違い: 数値を渡してしまう
let message2 = greet(123);
console.log(message2); // 出力: こんにちは、123（実行時エラーにはならないが、バグになりうる）

TypeScriptの場合

TypeScriptの場合、引数personに: stringと型注釈を付けることで、「この引数は文字列でなければならない」という制約が加わります。

数値の123を渡そうとすると、プログラムを実行する前にTypeScriptコンパイラがエラーを教えてくれるため、より安全に開発を進めることができます。

// person が必ず 文字列(string) であることを指定
function greet(person: string): string {
  return "こんにちは、" + person;
}

// 意図した通り: 文字列を渡す
let message1 = greet("アリス"); 

// 意図しない間違い: 数値を渡す
// let message2 = greet(123); 
// ↑ ここでコンパイルエラーが発生し、実行前に間違いに気づける！