Logo blog

サクッと始めるTypeScript

2026-03-24

今回は、TypeScriptの環境構築についてまとめます。

なるべくシンプルな構成にします。

ターミナルでコマンド操作ができる方であれば、初心者でもセットアップできる内容です。

準備

まず、TypeScriptを動かすにはNode.jsの環境が必要です。

ここからNode.jsをインストールできます。

Node.js — Node.js®をダウンロードする
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
nodejs.org

余談

私はnodebrewというNode.jsのバージョン管理ツールを使用していますが、とくにこだわりが無ければ、先程の公式サイトからインストールすれば問題ないです。

GitHub - hokaccha/nodebrew: Node.js version manager
Node.js version manager. Contribute to hokaccha/nodebrew development by creating an account on GitHub.
github.com

バージョン確認を行って、バージョンが表示されればOK。👌

Terminal window
node -v
# v22.18.0

TypeScript実行まで

では早速、TypeScriptをインストールしていきましょう。

まずは、任意の作業ディレクトリに移動して、以下のコマンドでプロジェクトを作成します。

Terminal window
npm init -y
# "package.json"が作成されたらOK

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

Terminal window
npm install typescript
# "node_modules"と"package-lock.json"が作成されたらOK


npx tsc -v
# Version 5.9.3

では、実際にTypeScriptを動かしてみましょう。

まずは、実行用のファイルを作成します。

Terminal window
mkdir -p src && touch src/index.ts

TypeScriptファイルに、以下のコードを記述してみます。

src/index.ts
const helloWorld: string = "Hello World";
console.log(helloWorld);

実行します。

Terminal window
# まずは、tscコマンドでコンパイルしてから、生成されたindex.jsを実行している
npx tsc src/index.ts && node src/index.js
# Hello World

Hello Worldが出力されたら成功です。

ちょっと応用

ただ、今のままだと

  1. 実行ごとに毎回コンパイルを行って
  2. JavaScriptファイルを生成して
  3. nodeコマンドで実行する

というのは手間なので、TypeScriptファイルを変更したら、JavaScriptファイルを生成せずとも勝手に実行されるように設定しましょう。

今回は、tsxというものを使用します。

tsxはTypeScriptExecuteの略で、TypeScriptを実行するためのNode.js拡張機能です。

nodeコマンドと同じように使えるみたいです。

Terminal window
# tsxインストール
npm install -D tsx


# まずはコンパイルされたファイルを削除しておきましょう
rm src/index.js


# 実行
npx tsx src/index.ts
# Hello World

これで、JavaScriptのコンパイルされたファイルを生成せずとも、実行できました。

ウォッチモード

tsxのデフォルトでは以下のディレクトリ内のファイル以外の変更を監視して、変更があるたびにスクリプトを再実行できる便利機能があります。

  • node_modules
  • bower_components
  • vendor
  • dist
  • 隠しディレクトリ（.*）
Terminal window
# tsxのあとに"watch"をつけるだけ
npx tsx watch src/index.ts

そしたら、src/index.tsを好きに変更してみましょう。

保存するたびに再実行されているはずです。

スクリプトに登録

最後に、package.jsonにコマンドを登録して、実行を簡単にしていきましょう。

package.json
{
  "name": "typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "tsx watch src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^5.9.3"
  },
  "devDependencies": {
    "tsx": "^4.20.6"
  }
}

より厳密にチェックしたい方は、tsc --noEmitを先に実行させることで、型チェックも行うようにするのもおすすめです。

// tsc --noEmitを先に実行させることで型チェックも行うようにする例
{
  "scripts": {
    "dev": "tsc --noEmit && tsx watch src/index.ts"
  }
}

ここまでできたら、あとは以下のコマンドを実行したら、TypeScriptの開発・実行環境の出来上がりです。

Terminal window
npm run dev


# > [email protected] dev
# > tsx watch src/index.ts


# Hello World

お疲れ様でした！🚀