エンジニア向け

【TypeScript入門】初心者でも簡単にTypeScript環境をセットアップできる方法を解説

2025年2月2日

「TypeScriptに興味はあるけど、どう始めたらいいかわからない…」という方も、この記事を読めば すぐに開発を始められる ので、ぜひ試してみてください！💡

Contents
  1. Node.jsをインストールしよう
  2. TypeScriptをインストールしよう！🛠️
  3. TypeScriptプロジェクトを作成しよう📂
  4. TypeScriptの設定ファイルを作ろう📝
  5. TypeScriptのコードを書いてみよう✍️
  6. TypeScriptをコンパイルして実行しよう🚀
  7. 便利なツールを導入しよう🔧
  8. まとめ🎯

Node.jsをインストールしよう

TypeScriptは Node.js のパッケージマネージャ（npm）を使ってインストールします。
まずはNode.jsをインストールしましょう！

✅ Node.jsのダウンロード

以下の公式サイトからダウンロードできます。
👉 Node.js公式サイト

おすすめのバージョン

  • LTS（Long Term Support）版 を選ぶのがベスト！安定していて長くサポートされます。

✅ インストール確認

ターミナル（またはコマンドプロンプト）を開いて、以下のコマンドを実行します。

Bash
node -v
v22.13.1

バージョンが表示されればOK！ 🎉

TypeScriptをインストールしよう！🛠️

次に TypeScriptをインストール します。

Bash
npm install -g typescript

✅ インストール確認

Bash
tsc -v

これで TypeScript のバージョンが表示されれば準備完了！ 🎉

TypeScriptプロジェクトを作成しよう📂

まずはプロジェクトフォルダを作りましょう！

Bash
mkdir my-typescript-app
cd my-typescript-app

✅ package.jsonを作成

Bash
npm init -y # -yはYESの意味

これで package.json が作られ、npmを使ったパッケージ管理ができるようになります。

JSON
# package.json
{
  "name": "my-typescript-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

TypeScriptの設定ファイルを作ろう📝

tsconfig.json は TSファイルをJSファイルにコンパイルするための設定ファイルです。
以下のコマンドで作成できます。

Bash
tsc --init

作成された tsconfig.json を少し編集しましょう。

JSON
{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  }
}

こうすることで、ソースコード（src）とコンパイル後のコード（dist）を分けられます。

TypeScriptのコードを書いてみよう✍️

では、実際にTypeScriptのコードを書いてみましょう！

✅ src/index.ts の作成

まず src フォルダを作り、index.ts というファイルを作成します。

Bash
mkdir src
touch src/index.ts

そして index.ts に、以下のコードを書きます。

TypeScript
// index.ts
const message: string = "Hello, TypeScript!";
console.log(message);

TypeScriptをコンパイルして実行しよう🚀

✅ TypeScriptをJavaScriptに変換（コンパイル）

Bash
tsc

すると dist/index.js というファイルが生成されます。

✅ 実行

Bash
node dist/index.js

出力結果:

Bash
Hello, TypeScript!

無事に動きましたね！ 🎉

便利なツールを導入しよう🔧

開発をもっと快適にするために 便利なツール も入れておきましょう！

✅ ts-node（コンパイルせずに実行できる）

Bash
npm install --save-dev ts-node
added 20 packages, and audited 21 packages in 5s

found 0 vulnerabilities

これを使うと、いちいち tsc しなくてもOK！

Bash
npx ts-node src/index.ts
Hello, TypeScript!

✅ nodemon（自動リロード）

Bash
npm install --save-dev nodemon
added 29 packages, and audited 50 packages in 3s

4 packages are looking for funding
  run `npm fund` for details

nodemon.json を作成して、変更時に自動で実行されるようにします。

Bash
nodemon.json
JSON
{
  "watch": ["src"],
  "ext": "ts",
  "exec": "npx ts-node src/index.ts"
}
Bash
npx nodemon
[nodemon] 3.1.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src\**\*
[nodemon] watching extensions: ts
[nodemon] starting `npx ts-node src/index.ts`
Hello, TypeScript!
[nodemon] clean exit - waiting for changes before restart

まとめ🎯

✅ Node.jsをインストール
✅ TypeScriptをインストール
✅ プロジェクトのセットアップ
✅ コードを書いてコンパイル・実行
✅ 便利なツール（ts-node / nodemon）を導入

これで、TypeScriptの開発環境がバッチリ整いました！ 🎉

-エンジニア向け
-