TypeScriptの始め方｜Node.jsとVSCodeで学ぶ開発環境構築ガイド【初心者向け完全解説】

こんな経験ありませんか？

「TypeScriptを始めたいけど、何から手をつければいいのかわからない」
「Node.jsとかtsconfig.jsonって言われても、そもそも何のために必要なの？」
「環境構築でつまずいて、コードを書く前に心が折れそう…」

こういった悩みは、TypeScriptをこれから学び始めようとする多くの方が感じることです。特に現場で使うスキルとして必要になってきたものの、独学ではとっつきにくさを感じている方も少なくないでしょう。

この記事でわかること

本記事では、以下の内容を順を追って丁寧に解説していきます。

Node.jsのインストール手順と役割
TypeScriptをインストールして使うための準備
VSCodeでの開発を効率化する設定と拡張機能
tsconfig.jsonの基本設定とその意味
Hello Worldまでの動作確認
よくあるトラブルとその対処法

読了後のゴール

この記事を読み終えれば、あなたは次のことができるようになります。

自分のPCでTypeScriptを実行できるようになる
開発のための基礎設定を理解し、変更できる
よくあるエラーの原因と対策がわかる

【Node.jsの役割とインストール】

TypeScriptになぜNode.jsが必要なの？

TypeScriptはJavaScriptのスーパーセットです。つまり、TypeScriptで書かれたコードは、最終的にJavaScriptに変換（トランスパイル）されて実行されます。
このトランスパイルや、npm（Node Package Manager）を使ったライブラリの管理にはNode.jsが不可欠です。

補足：Node.jsとは
ブラウザの外でJavaScriptを動かすための実行環境。TypeScriptコンパイラ(tsc)や、開発ツールの多くはNode.js上で動作します。

Step1：Node.jsの公式サイトへアクセス

Node.js公式サイトにアクセス
画面中央に「LTS（推奨版）」と「Current（最新版）」があります
　→ 基本的にはLTS（Long Term Support）版を選択してください
ダウンロード後、画面の指示に従ってインストール

Step2：インストール確認

ターミナルを開いて、以下のコマンドを実行しましょう。

node -v
npm -v

出力例：

v20.11.1
10.2.3

このようにバージョン情報が表示されればインストールは成功です。

よくあるインストールの注意点

古いバージョンのNode.jsがすでに入っている場合、nvm（Node Version Manager）を使ってバージョン管理すると便利です
npmも自動的に一緒にインストールされますが、古い環境だと手動アップデートが必要になる場合があります

【TypeScriptの導入と確認】

TypeScriptを使うための準備

Node.jsをインストールしたら、次はTypeScript自体をインストールしていきます。
TypeScriptはnpmを使ってインストールでき、グローバルインストールとローカルインストールの2種類の方法があります。

Step1：グローバルインストール（おすすめ）

まずはターミナルで以下のコマンドを実行してください。

npm install -g typescript

※-g は「global（グローバル）」の意味で、PC全体でTypeScriptコマンドを使えるようにするオプションです。

インストール後にバージョン確認：

tsc -v

出力例：

Version 5.4.3

このように表示されれば成功です。

補足：ローカルインストールとの違い

プロジェクトごとにTypeScriptのバージョンを固定したい場合は、ローカルインストールを使います。

npm install --save-dev typescript

ローカルの場合は npx を使って tsc を呼び出すことになります。

npx tsc --init

補足：チーム開発では、プロジェクト単位のバージョン固定が推奨されるため、ローカルインストールの運用も視野に入れると良いでしょう。

TypeScriptのインストールが失敗する場合

npmが古い → npm install -g npm で最新版へ
ネットワークの制限 → VPNやプロキシの影響がある場合、npmのミラー設定を確認

【VSCodeのおすすめ設定】

なぜVSCodeがTypeScript開発に向いているのか？

VSCode（Visual Studio Code）は、Microsoftが提供する軽量かつ高機能なエディタで、TypeScriptの開発に最適化された環境を提供しています。
公式にTypeScriptをサポートしているため、コード補完・型チェック・構文ハイライトなどがスムーズに機能します。

Step1：VSCodeのインストール

公式サイトにアクセスし、最新版をインストール
インストール後、ターミナルから code . で起動できるようにしておくと便利（Macでは「コマンドパレット」からシェルにパスを通す）

Step2：おすすめ拡張機能（Extension）

VSCodeには便利な拡張機能が多数ありますが、TypeScript開発に役立つものは以下です。

■ 必須系

ESLint
コードの品質を自動チェック。TypeScript用のLintルールも利用可能
Prettier – Code formatter
チームでのコードフォーマット統一に役立つ自動整形ツール
TypeScript Hero（またはPath Intellisense）
importの補完や整理が快適になる

Step3：設定ファイルで開発体験をカスタマイズ

VSCodeでは .vscode/settings.json にプロジェクト固有の設定が可能です。
例えば：

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.tsdk": "node_modules/typescript/lib"
}

これにより、保存時に自動フォーマット＋Lint修正が実行され、作業効率が格段にアップします。

補足：VSCode内ターミナルでの開発が基本に

VSCodeには統合ターミナルが内蔵されており、Node.jsやTypeScriptのコマンドをそのまま打てます。
ターミナルはショートカット `Ctrl + Shift + “ で素早く呼び出せます。

【プロジェクト初期化とtsconfig設定】

TypeScriptのプロジェクトはどう始める？

VSCodeやNode.jsの準備が整ったら、実際にTypeScriptのプロジェクトを初期化してみましょう。
ここでは最もシンプルでわかりやすい構成を紹介します。

Step1：プロジェクトフォルダを作成

mkdir my-ts-app
cd my-ts-app
npm init -y

これで package.json が生成され、Node.jsプロジェクトとして初期化されます。

Step2：TypeScriptをローカルに追加

npm install --save-dev typescript

※プロジェクト単位でTypeScriptのバージョンを固定でき、チーム開発でも安心です。

Step3：tsconfig.jsonを作成

以下のコマンドで基本設定ファイルを生成します。

npx tsc --init

すると tsconfig.json という設定ファイルが自動生成されます。

Step4：基本的な設定例（tsconfig.json）

以下のような設定を加えると、シンプルかつ実用的な構成になります。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

outDir: コンパイル後のJavaScriptを出力するフォルダ
rootDir: TypeScriptソースのルートディレクトリ
strict: 厳密な型チェック

Step5：srcディレクトリを作成

mkdir src

今後はこの src に .ts ファイルを格納していくことになります。

【Hello World実行まで】

Step1：最初のTypeScriptファイルを作成

touch src/index.ts

src/index.ts に以下のように記述してみましょう：

const greeting: string = "Hello, TypeScript!";
console.log(greeting);

Step2：TypeScriptファイルをコンパイル

以下のコマンドを実行して、.ts ファイルを .js に変換します。

npx tsc

dist/index.js が生成されるはずです。

Step3：実行してみる

node dist/index.js

出力：

Hello, TypeScript!

このように表示されれば、開発環境の構築とTypeScriptの導入が正しく行われている証拠です。

Step4：開発ルーチンをスムーズにするために

tsc –watch を使えば、ファイルの変更を自動でコンパイルしてくれます。
nodemon + ts-node を組み合わせて、開発体験を向上させることも可能です。

【コマンドが通らない場合の対処】

よくあるエラー：tsc: command not found

原因

TypeScriptがグローバルにインストールされていない、またはパスが通っていない

解決策

グローバルにインストールされていない場合：

npm install -g typescript

ローカルインストール済みの場合は npx を使う：

npx tsc

よくあるエラー：node: command not found

原因

Node.jsがインストールされていない、またはパスが通っていない

解決策

Node.js公式サイトから再インストール
インストール後、ターミナルを再起動してから確認

よくあるエラー：Cannot find module 系のエラー

原因

TypeScriptが outDir に出力したJavaScriptファイルをNode.jsが見つけられない

解決策

tsc コマンドでコンパイルが成功しているかを確認
dist/ 以下に index.js などが正しく生成されているか確認
tsconfig.json の outDir・rootDir 設定に誤りがないか見直す

【コンパイル設定ミスとその対処】

よくあるミス①：outDir や rootDir のパスミス

症状

tsc 実行後に dist フォルダができない
ファイルが意図しない場所に生成される

原因

tsconfig.json の rootDir や outDir の指定が実際のディレクトリ構成と合っていない

解決策

rootDir は src に
outDir は dist に
フォルダ名のスペルミスやパスの階層を確認

{
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  }
}

よくあるミス②：include / exclude の設定抜け

症状

tsc 実行時に何もコンパイルされない

原因

tsconfig.json に include や exclude の設定がされておらず、対象ファイルが読み込まれていない

解決策

include に src を明示する

{
  "include": ["src"]
}

よくあるミス③：古いJS構文との非互換

症状

async/await などが使用できない

原因

target が古く設定されている（例：ES5など）

解決策

target を ES2020 などに変更

{
  "compilerOptions": {
    "target": "ES2020"
  }
}

【型エラーの罠と対処法】

よくある型エラー①：プロパティが存在しない

Before（間違った例）

const user = {};
console.log(user.name); // エラー: Property 'name' does not exist on type '{}'

解説

TypeScriptはオブジェクトの構造（型）を厳密にチェックするため、暗黙的な空のオブジェクトには name プロパティが存在しないと判断されます。

After（正しい例）

type User = { name: string };
const user: User = { name: "Taro" };
console.log(user.name);

よくある型エラー②：暗黙の any

Before

function greet(msg) {
  return msg.toUpperCase();
}

エラー内容

“Parameter ‘msg’ implicitly has an ‘any’ type.”

After

function greet(msg: string): string {
  return msg.toUpperCase();
}

よくある型エラー③：Union型の取り扱い

function printId(id: number | string) {
  console.log(id.toUpperCase()); // エラー
}

解説

id が number 型の可能性もあるため、.toUpperCase() は型エラーになります。

解決方法

function printId(id: number | string) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id);
  }
}

補足：VSCodeで型エラーを早期発見する設定

“strict”: true を tsconfig.json に設定すると、型の不整合をより厳密に検出できます
hover や red squiggle で警告される内容を見逃さないようにしましょう

【まとめと次のステップ】

本記事のまとめ

ここまで、TypeScriptの導入から開発を始めるための環境構築を段階的に解説してきました。

Node.jsの役割：TypeScriptの実行とnpmを支える基盤
TypeScriptの導入方法：グローバル・ローカルどちらも理解しておく
VSCodeの設定：開発効率を上げる拡張機能と設定
プロジェクトの初期化：tsconfig.json の構成が開発の鍵
Hello Worldの実行：正しく動かすことで達成感を得る
よくあるトラブル：型エラーや設定ミスへの具体的な対処法

次にやるべきこと

型定義ファイル（.d.ts）の活用方法を学ぶ
ReactやVueと組み合わせたTypeScript開発にも挑戦してみる
ESLint + Prettier の自動整形環境を構築してチーム開発へ備える

TypeScriptは学べば学ぶほど、JavaScript開発が「型の安心感」とともにより効率的になります。
この第一歩をきっかけに、さらに深く実践的なスキルを磨いていきましょう。

【外部リンク】

TypeScript公式ドキュメント

Node.js公式ドキュメント

Visual Studio Code公式ドキュメント

【内部リンク】

【完全版】型の変換とは？キャストの基本と落とし穴 | Java・JavaScript・TypeScriptで徹底理解する型の扱い方

JavaScriptでよく発生するエラー「ReferenceError」「SyntaxError」などの原因と対策を具体例付きで解説

JavaScriptの配列・JSON・map・Map：データ操作術

JavaScriptのAjax完全入門｜fetchの使い方・CORSエラーの対処・非同期通信の基本を解説

非同期処理の基本を理解｜setTimeout・Promise・async/awaitの違いと使い方

JavaScriptでJSON配列を効率的に検索する方法

ROUTE

ルートゼロのアクティビティ