English 中文 العربية 日本語 Português

TypeScript: TypeScript入門

TypeScriptはJavaScriptの「強化版」であり、JavaScriptに型チェック機能を追加することで、コードの実行前にエラーを検出できるようになります。

このチュートリアルは、経験のない初心者向けに作成されています。インストールと設定から始まり、TypeScript を使用してコマンドラインアプリケーションを自力で開発できるようになるまで、順を追って解説しています。

1. 学習内容

2. TypeScriptとは何か？

TypeScriptは、マイクロソフトによって開発され、2012年に初めてリリースされたオープンソースのプログラミング言語です。これはJavaScriptのスーパーセットであり、つまり、有効なJavaScriptコードはすべてTypeScriptコードとしても有効ですが、TypeScriptはその上に型システムを追加しています。

例えるなら、JavaScriptは自転車に乗るようなものです。道路標識を見なくても目的地にはたどり着けますが、道を間違えやすいものです。一方、TypeScriptはGPSを使いながら自転車に乗るようなものです。出発する前から、どこで曲がるべきか、どの道が行き止まりなのかを教えてくれます。

3. TypeScriptとJavaScriptの関係

TSとJSの関係を理解するには、スーパーセット、コンパイル、互換性という3つの用語が鍵となります。

(1) スーパーセット：TSに含まれるものはすべてJSにも含まれている

JavaScriptのコードは、.tsファイルに直接記述するだけで動作します。新しい言語を一から学ぶ必要はありません。TypeScriptは、ゼロから始めるのではなく、JavaScriptを基盤として構築されているからです。

(2) コンパイル：TSはブラウザ上で直接実行することはできません

ブラウザはJavaScriptのみをサポートしており、TypeScriptはサポートしていません。そのため、記述した.tsコードは、ブラウザやNode.jsで実行する前に、まずTypeScriptコンパイラ（tsc）によって.jsファイルにコンパイルする必要があります。

TEXT 📖 参照専用 
.ts Documents  →  TypeScript Compiler (tsc)  →  .js Documents  →  Browser/Node.js Run

このコンパイル処理こそがTypeScriptの中核となる価値であり、実行時までエラーの報告を待つのではなく、コンパイル時に型エラーをチェックするという点にあります。

(3) 互換性：既存のJSプロジェクトは段階的に移行できる

ファイルごとに .js を .ts に変更することができ、プロジェクト全体を一括して書き換える必要はありません。TypeScriptの公式ドキュメントには allowJs オプションが記載されており、これを利用することで、TypeScriptプロジェクト内でJavaScriptファイルを混在させることができます。

▶ サンプル：JavaScriptコードをTypeScriptとして直接使用する方法

JAVASCRIPT 
// This is a standard JavaScript Code
function greet(name) {
  return "Hello, " + name;
}

console.log(greet("Charlie"));
▶ 試してみよう

このコードは修正の必要がありません。.ts ファイルにそのまま配置するだけで、正常にコンパイルされます。これは、TypeScript が JavaScript のスーパーセットであるためです。

出力：

TEXT 📖 参照専用 
Hello, Charlie

4. なぜTypeScriptを学ぶのか？

すでにJavaScriptを知っているなら、なぜわざわざTypeScriptを学ぶ必要があるのでしょうか？　その理由は、たった4つの言葉に集約されます。エラーの防止と効率の向上です。

(1) エラーは実行時にクラッシュを引き起こすのではなく、コンパイル時に検出される

JavaScript は動的型付け言語であり、変数の型は実行時まで決定されません。これにより柔軟性が得られますが、その代償として、タイプミスや型の不一致が、ユーザーがボタンをクリックするまで検出されない可能性があります。

JAVASCRIPT 
// JavaScript：No errors will occur，But the result was NaN
let price = "99";
let total = price * 2;  // NaN —— Strings cannot be multiplied.

TypeScript では、コンパイル時にエラーが検出されます：

TYPESCRIPT 
// TypeScript：Compilation error，Immediate Reminder
let price: string = "99";
let total: number = price * 2;  // ❌ Error：string This type cannot be used in arithmetic operations.

(2) エディタのオートコンプリート機能により、コーディングが速くなる

VS Code は、TypeScript を標準でサポートしています。変数名を入力すると、エディタが利用可能なプロパティやメソッドを自動的に候補として提示し、型エラーをリアルタイムでハイライト表示します。まるで、正しい方向へ導いてくれるパートナーがそばにいるかのようです。

(3) コードはドキュメントそのものであり、チームの連携を円滑にする

TypeScriptの型注釈は、ドキュメントとして最適な形式です。function getUser(id: number): Userと表示されれば、そのパラメータが数値であり、戻り値がUserオブジェクトであることが一目でわかります。追加のコメントを書く必要はありません。型そのものがすべてを物語っているからです。

(4) 業界の動向：雇用にとってのプラス材料

バージョン2.0以降、AngularはTypeScriptを使用して開発されており、Vue 3はTypeScriptで書き直されました。また、ReactとTypeScriptの組み合わせが標準となり、DenoやBunもTypeScriptをネイティブでサポートしています。フロントエンドの求人情報では、「TypeScriptの知識」は「あれば尚可」から「必須要件」へと変化しています。

▶ サンプル：TypeScriptの型チェックの実践

TYPESCRIPT 
// TypeScript Type errors will be caught at compile time
let age: number = 25;
age = "Twenty-six";  // ❌ Compilation Error：You cannot string Assign to number

// JavaScript The same code won't cause an error here.，But there might be problems during runtime.
▶ 試してみよう
💡 ヒント： 上記の age = "twenty-six" という行は、TypeScript のコンパイル時に赤くハイライトされ、エラーとしてフラグが立てられるため、プログラムを実行する前から問題があることがわかります。一方、JavaScript では、このコードは age に対して算術演算が行われるまで「問題なく」実行されますが、その時点で突然クラッシュしてしまいます。

5. TypeScriptのワークフロー

TypeScript を使用した開発プロセス全体は以下の通りです：

  1. .ts ファイルを作成する—TypeScriptでコードを記述し、型注釈を追加する
  2. コンパイル .ts → .js—tsc コマンドを使用してコンパイルします。コンパイラが型エラーをチェックします。
  3. .js ファイルを実行する――コンパイルされた JavaScript は、どの環境でも実行可能です
TEXT 📖 参照専用 
┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│  Write .ts    │ ──→ │  tsc Compilation    │ ──→ │  Run .js    │
│  Type Annotations    │     │  Type Checking    │     │  Browser/Node │
└──────────────┘     └──────────────┘     └──────────────┘
💡 ヒント： コンパイルプロセスには「余分な手順が1つある」ように見えるかもしれませんが、この手順こそがまさにTypeScriptの真価です。コンパイル時に落とし穴を回避できるため、実行時のデバッグに費やす時間の数倍もの時間を節約できます。

6. 誰がTypeScriptを学ぶべきか

適している あまり適していない
JavaScriptの基礎知識があるフロントエンド開発者 プログラミング経験がまったくない初心者（JavaScriptから始めます）
コードの品質向上やチームでの連携強化を目指す開発者 単純なスクリプトを書くだけで、型安全性は必要としないような場面
Angular/Vue 3/React+TS プロジェクトの立ち上げを準備している人 労力に見合う成果が得られない小規模で短期的なプロジェクト
バックエンド Node.js 開発者 —
📌 重要ポイント： このチュートリアルでは、JavaScript の構文の基本（変数、関数、オブジェクト、配列、DOM の操作）をすでに理解していることを前提としています。まだ JavaScript を学んだことがない場合は、まず当サイトの JavaScript チュートリアルを修了することをお勧めします。

❓ よくある質問

Q TypeScriptとJavaScriptの関係は、具体的にはどのようなものですか？
A TypeScriptはJavaScriptのスーパーセットです。例えるなら、JavaScriptが水道水だとすれば、TypeScriptは浄水器でろ過された水道水のようなものです。源は同じですが、TSには「ろ過」（型チェック）という追加の層があり、より安全になっています。すべてのJSコードは当然ながら有効なTSコードとなるため、既存の知識を捨てる必要はありません。
Q TypeScriptを学ぶ前に、JavaScriptの専門家である必要がありますか？
A 専門家である必要はありませんが、少なくとも変数、関数、オブジェクト、配列といった基本的な構文には慣れておくべきです。これは、TypeScriptがまったく新しい言語ではなく、JavaScriptの拡張版だからです。これは、オートマ車の運転を覚える前に、自転車の乗り方を知っておく必要があるのと同じようなものです。
Q TypeScriptのコンパイルによってプログラムの動作が遅くなりますか？
A いいえ。TypeScriptのコンパイルでは標準的なJavaScriptコードが生成されるため、実行時のパフォーマンスは手書きのJavaScriptとまったく同じです。型注釈はコンパイル中に「消去」され、最終的な.jsファイルには含まれません。
Q 最近人気のあるフレームワークはすべてTypeScriptを使用していますか？
A はい。Angularはバージョン2.0以降、TypeScriptを使用して開発されています。Vue 3はコア部分をTypeScriptで書き直しました。ReactコミュニティではTypeScriptが標準となっています。また、DenoやBunはTypeScriptをネイティブでサポートしています。TypeScriptは、現代のフロントエンド開発における「標準言語」となったと言っても過言ではありません。

📖 まとめ

📝 練習問題

  1. 基本問題（難易度：⭐）：TypeScriptとJavaScriptの3つの主な違いを自分の言葉で説明し、「スーパーセット」という用語について、あなたの理解を述べてください。
  2. 上級演習（難易度 ⭐⭐）：型エラー（文字列を数値として扱うなど）を含む JavaScript コードを記述し、TypeScript がコンパイル時にこのエラーをどのように検出するかを説明してください。
  3. 課題（難易度：⭐⭐⭐）：興味のあるフロントエンドフレームワーク（Angular／Vue／React）について調査し、TypeScriptへの対応状況を調べ、簡単な要約を作成してください。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%