メインコンテンツまでスキップ

最初のプログラムと型エラー

この章では、最初のTypeScriptプログラムを作成し、コンパイルと実行を体験します。

この章で学ぶこと​

  • TypeScriptファイルの作成とコンパイル
  • TypeScriptの実行フロー
  • 型エラーの検出と対処
  • 開発を効率化する機能
備考

この章では前章で構築した開発環境を使用します。typescript-learningディレクトリ内で作業を進めてください。

最初のTypeScriptプログラム​

ステップ1: TypeScriptファイルの作成​

ファイル名: hello.ts

// 変数の宣言：型注釈を使ってstring型であることを明示
let message: string = 'Hello, TypeScript!';

// コンソールに出力
console.log(message);

// 関数の定義：引数と戻り値の型を明示
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// 関数の呼び出し
console.log(greet('World'));
console.log(greet('TypeScript'));

コードの詳細解説:

let message: string = 'Hello, TypeScript!';
  • let: 変数宣言のキーワード（再代入可能な変数）
  • message: 変数名
  • : string: 型注釈（この変数はstring型であることを宣言）
  • = 'Hello, TypeScript!': 初期値の代入
function greet(name: string): string {
  return `Hello, ${name}!`;
}
  • function: 関数宣言のキーワード
  • greet: 関数名
  • (name: string): 引数名と型（nameという名前のstring型の引数）
  • : string: 戻り値の型（この関数はstring型の値を返す）
  • `Hello, ${name}!`: テンプレートリテラル（変数を埋め込める文字列）
  • ${name}: 変数の埋め込み

ステップ2: TypeScriptのコンパイル​

# hello.tsをJavaScriptにコンパイル
# tsc: TypeScript Compiler（TypeScriptコンパイラ）
tsc hello.ts

# コンパイル後、hello.jsファイルが生成される
# 確認してみましょう
ls
# hello.ts  hello.js

生成されるJavaScriptコード（hello.js）:

"use strict";
// 変数の宣言：型注釈を使ってstring型であることを明示
let message = 'Hello, TypeScript!';
// コンソールに出力
console.log(message);
// 関数の定義：引数と戻り値の型を明示
function greet(name) {
    return `Hello, ${name}!`;
}
// 関数の呼び出し
console.log(greet('World'));
console.log(greet('TypeScript'));

重要なポイント:

  • TypeScriptの型注釈（: stringなど）はすべて削除される
  • 先頭に "use strict"; が付与される（TypeScript 6.0 では strict がデフォルト有効のため）
  • let やテンプレートリテラルはそのまま残る（デフォルトの target が ES2025 のため。TypeScript 5.x まではデフォルトが ES5 だったため var や文字列結合に変換されていた）
  • 最終的に実行されるのはこのJavaScriptコード

ステップ3: JavaScriptの実行​

# Node.jsでコンパイル後のJavaScriptファイルを実行
node hello.js

# 実行結果:
# Hello, TypeScript!
# Hello, World!
# Hello, TypeScript!

実行フローの全体像​

┌─────────────┐     tsc        ┌─────────────┐     node       ┌─────────────┐
│  hello.ts   │  ──────────>   │  hello.js   │  ──────────>   │   Output    │
│ (TypeScript)│    Compile     │ (JavaScript)│    Execute     │  (Console)  │
└─────────────┘                └─────────────┘                └─────────────┘
   Type info                      No types                    "Hello, ..."

型エラーの検出​

TypeScript の主な利点である型エラーの検出を体験してみましょう。

例1: 型の不一致​

ファイル名: type-error.ts

// string型の変数を宣言
let userName: string = 'John';

// 正常なコード：string型の値を代入
userName = 'Jane';
console.log(userName);  // 'Jane'

// エラーになるコード：number型の値をstring型の変数に代入
userName = 123;
// Error: Type 'number' is not assignable to type 'string'.

コンパイルしてみる:

tsc type-error.ts

# エラーメッセージが表示される:
# type-error.ts:9:1 - error TS2322: Type 'number' is not assignable to type 'string'.
#
# 9 userName = 123;
#   ~~~~~~~~

エラーメッセージの読み方:

  • type-error.ts:9:1: ファイル名と行番号、列番号
  • error TS2322: エラーコード（TypeScriptのエラー分類番号）
  • Type 'number' is not assignable to type 'string': エラーの内容
  • 下部に該当箇所が~で示される

例2: 関数の引数の型エラー​

// number型の引数を2つ受け取り、number型を返す関数
function add(a: number, b: number): number {
  return a + b;
}

// 正常な呼び出し
console.log(add(5, 10));        // 15

// エラーになる呼び出し
console.log(add('5', '10'));
// Error: Argument of type 'string' is not assignable to parameter of type 'number'.

console.log(add(5, '10'));
// Error: Argument of type 'string' is not assignable to parameter of type 'number'.

重要な設定: noEmitOnError​

TypeScriptには、エラーがあってもJavaScriptファイルを生成するか制御できるオプションがあります。

# エラーがあってもJavaScriptファイルを生成する（デフォルト）
tsc type-error.ts
# エラーメッセージは表示されるが、type-error.jsは生成される

# エラーがある場合はJavaScriptファイルを生成しない
tsc --noEmitOnError type-error.ts
# エラーメッセージが表示され、JavaScriptファイルは生成されない

開発を効率化する機能​

ウォッチモード​

ファイルの変更を監視し、自動的に再コンパイルする機能です。

# ウォッチモードでコンパイル
tsc hello.ts --watch

# または短縮形
tsc hello.ts -w

# 実行後、以下のメッセージが表示される:
# [11:30:00] Starting compilation in watch mode...
# [11:30:01] Found 0 errors. Watching for file changes.

使い方:

  1. ウォッチモードを起動
  2. エディタでhello.tsを編集して保存
  3. 自動的に再コンパイルされる
  4. 停止するにはCtrl+Cを押す

メリット:

  • 毎回tscコマンドを実行する手間が省ける
  • コードの変更がすぐに反映される
  • 開発の生産性が向上

ts-node（TypeScriptを直接実行）​

コンパイルせずにTypeScriptファイルを直接実行できるツールです。

# ts-nodeをインストール
npm install -g ts-node

# TypeScriptファイルを直接実行
ts-node hello.ts

# 実行結果がすぐに表示される
# Hello, TypeScript!
# Hello, World!
# Hello, TypeScript!

ts-nodeの仕組み:

通常の方法:
  hello.ts → tsc → hello.js → node → Output

ts-nodeを使用:
  hello.ts → ts-node → Output（メモリ上でコンパイル&実行）

使い分け:

  • 開発中: ts-nodeで素早く動作確認
  • 本番環境: tscでコンパイルしてからnodeで実行（パフォーマンスが良い）

試してみよう: 型エラーを体験しよう ★​

以下の要件を満たすTypeScriptファイルを作成し、意図的に型エラーを発生させてエラーメッセージを確認してください。

要件:

  1. multiplyという関数を作成（number型の引数2つを受け取り、掛け算の結果を返す）
  2. 正しい呼び出しと、型エラーが発生する呼び出しの両方を試す
ヒント
  1. 関数の定義: function multiply(a: number, b: number): number
  2. 正しい呼び出し: multiply(3, 4) → 12
  3. 型エラーの呼び出し: multiply('3', '4') または multiply(3, '4')
  4. tsc ファイル名.ts でコンパイルしてエラーを確認
回答と解説

ファイル名: multiply.ts

// number型の引数を2つ受け取り、掛け算の結果を返す関数
function multiply(a: number, b: number): number {
  return a * b;
}

// 正しい呼び出し
console.log(multiply(3, 4));      // 12
console.log(multiply(2.5, 4));    // 10

// 型エラーが発生する呼び出し（コメントアウトを外すとエラー）
// console.log(multiply('3', '4'));  // Error: 型 'string' の引数を型 'number' のパラメータに割り当てられません
// console.log(multiply(3, '4'));    // Error: 型 'string' の引数を型 'number' のパラメータに割り当てられません

コンパイルと実行:

# コンパイル
tsc multiply.ts

# 実行
node multiply.js
# 12
# 10

エラーを確認する場合:

型エラーの行のコメントを外して tsc multiply.ts を実行すると、以下のようなエラーが表示されます:

multiply.ts:11:22 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

11 console.log(multiply('3', '4'));
                        ~~~

このエラーメッセージから、TypeScriptが型の不一致を検出し、どの位置でエラーが発生したかを正確に示していることがわかります。これが TypeScript の型安全性によって得られるメリットです。

まとめ​

この章で学んだこと:

  • TypeScriptの基本的な使い方: .tsファイルの作成、tscコマンドでコンパイル、nodeコマンドで実行
  • 型エラーの検出: TypeScriptがコンパイル時に型の不一致を検出する
  • エラーメッセージの読み方: ファイル名、行番号、エラーコード、エラー内容
  • 開発効率化: ウォッチモード（--watch）、ts-node（直接実行）

次の章では、TypeScriptの基本的なデータ型（number、string、boolean、配列）について学びます。

初学者がつまずきやすいポイント​

警告

よくある間違い

❌ TypeScriptファイルを直接nodeで実行しようとする​

node hello.ts
# → SyntaxError: Cannot use import statement outside a module

原因: Node.jsはTypeScriptを直接実行できない。

解決策:

# 方法1: コンパイルしてから実行
tsc hello.ts && node hello.js

# 方法2: ts-nodeを使用
npx ts-node hello.ts

❌ コンパイルしたのに変更が反映されない​

原因: 古い.jsファイルを実行している、または再コンパイルしていない。

解決策:

  1. tsc hello.tsで再コンパイル
  2. ウォッチモード（tsc --watch）を使用

❌ 型エラーがあるのにJavaScriptファイルが生成される​

原因: TypeScriptのデフォルト動作ではエラーがあってもJSファイルを生成する。

解決策:

# エラー時にJSを生成しない
tsc --noEmitOnError hello.ts

❌ 「Cannot find name 'console'」エラー​

Cannot find name 'console'.

原因: libオプションが設定されていない。

解決策: tsconfig.jsonを作成するか、tsc --initを実行する。

次に読む​

基本の型 へ進みます。TypeScript の最も基本的な型 (プリミティブ / 配列 / オブジェクト / Union) を学びます。