TypeScript を使い始める

Volardev 編集部 April 29, 2026

TypeScriptはコンパイラを使用してJavaScriptにトランスパイル（変換）されます。TypeScriptがJavaScriptに変換されるということは、JavaScriptが動作するあらゆる環境でTypeScriptを実行できることを意味します。

1. コンパイラのインストール

TypeScriptには公式のコンパイラがあり、npmを通じてインストールすることができます。npmの詳細や開始方法については、こちらの「npmとは？」を参照してください。

npmプロジェクト内で以下のコマンドを実行し、コンパイラをインストールします。

例：独自のTypeScriptサーバーを取得

npm install typescript --save-dev

実行すると、以下のような出力が表示されます。

例

added 1 package, and audited 2 packages in 2s
found 0 vulnerabilities

コンパイラは node_modules ディレクトリにインストールされ、npx tsc コマンドで実行可能です。

例

npx tsc

実行すると、以下のような出力が表示されます。

例

Version 4.5.5
tsc: The TypeScript Compiler - Version 4.5.5
（続いて共通コマンドのリストが表示されます）

2. グローバルインストール

TypeScriptを「グローバル」にインストールすると、システムの PATH に tsc コマンドが追加され、どのフォルダからでも利用できるようになります。

例

npm install -g typescript

例

tsc -v

2.1 メリット

任意のプロジェクトやディレクトリから tsc に素早くアクセスできる。
コマンドの試行、学習、または使い捨てのスクリプトに便利。
一部のエディタやツールがグローバルコンパイラを自動的に検出できる。

2.2 デメリット

マシン（またはチームメイト）によってグローバルバージョンが異なる可能性がある。
プロジェクトが期待するバージョンと乖離し、予期せぬ問題を引き起こす可能性がある。
一部のシステムでは、グローバルインストールに昇格した権限（管理者権限など）が必要。

ベストプラクティスは、TypeScriptをプロジェクトの devDependency としてインストールし、npx tsc で実行することです。これにより、異なる環境間でも正確なバージョンの一貫性が保たれます。グローバルインストールは、アドホック（一時的）な使用にはオプションとして便利です。

3. コンパイラの設定

デフォルトでは、空のプロジェクトでTypeScriptコンパイラを実行すると、ヘルプメッセージが表示されます。コンパイラの設定は tsconfig.json ファイルを使用して行います。

以下のコマンドを実行すると、推奨設定が含まれた tsconfig.json を作成できます。

例

npx tsc --init

実行すると、以下のような出力が表示されます。

例

Created a new tsconfig.json with:
TS
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

詳細は「TypeScript Config」で確認できます。また、tsconfig.json ファイルに追加できる設定例を以下に示します。

例

{
  "include": ["src"],
  "compilerOptions": {
    "outDir": "./build"
  }
}

エディタでファイルを開き、これらのオプションを追加できます。この設定により、プロジェクトの src/ ディレクトリにあるTypeScriptファイルを、build/ ディレクトリのJavaScriptファイルにトランスパイルするようにコンパイラが構成されます。

4. 初めてのTypeScriptプログラム

TypeScriptのセットアップを確認するために、シンプルな「Hello, World!」プログラムを作成してみましょう。
hello.ts という名前の新しいファイルを作成し、以下の内容を記述します。

hello.ts

// 名前（文字列）を受け取り、挨拶を返す関数
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// "World"という引数で関数を呼び出す
const message: string = greet("World");
console.log(message);

次に、TypeScriptコードをコンパイルします。

例

npx tsc hello.ts

これにより、同じディレクトリに hello.js ファイルが生成されます。

例（生成されたJavaScript）

function greet(name) {
  return "Hello, ".concat(name, "!");
}

var message = greet("World");
console.log(message);

コンパイルされたJavaScriptを実行します。

例

node hello.js

以下の出力が表示されれば成功です。

出力例

Hello, World!

注記： もし前述の tsconfig.json 設定を使用している場合は、TypeScriptファイルを src ディレクトリに配置してください。コンパイル後のJavaScriptは build ディレクトリに出力されます。