【環境構築】サクッと始める TypeScript

こんにちは、けいこんぐらです！

今回は、TypeScript の環境構築について解説します！

TypeScript の環境構築をする際、なんのパッケージが必要で、どのように設定すれば良いのか、毎回忘れるのでこれを機に備忘録も兼ねて記事にしてみます 📝

なるべくシンプルな構成で、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

https://nodejs.org

これは余談ですが、私は Mac（Apple M2）を使用しており、nodebrew という Node.js のバージョン管理ツールを使用していますが、とくにこだわりが無ければ、上記の公式サイトからインストールすれば問題ありません！

GitHub - hokaccha/nodebrew: Node.js version manager

Node.js version manager. Contribute to hokaccha/nodebrew development by creating an account on GitHu

https://github.com

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

node -v
# v22.18.0

TypeScript 実行まで

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

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

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

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

npm install typescript
# "node_modules"と"package-lock.json"が作成されたらOK！
 
npx tsc -v
# Version 5.9.3

いいですね！では、実際に TypeScript を動かしてみましょう！

まずはファイルを作成して、Hello Worldを出力しましょう！

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

const helloWorld: string = "Hello World";
console.log(helloWorld);

# まずは、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 は TypeScript Execute の略で、 TypeScript を実行するための Node.js 拡張機能です。

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

# tsxインストール
npm install -D tsx
 
# まずはコンパイルされたファイルを削除しておきましょう！
rm src/index.js
 
# 実行！
npx tsx src/index.ts
# Hello World

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

ウォッチモード

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

• node_modules
• bower_components
• vendor
• dist
• 隠しディレクトリ（.*）

# tsxのあとに"watch"をつけるだけ！
npx tsx watch src/index.ts

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

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

スクリプトに登録

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

{
  "name": "typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^5.9.3"
  },
  "devDependencies": {
    "tsx": "^4.20.6"
  }
}

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

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

npm run dev
 
# > typescript@1.0.0 dev
# > tsx watch src/index.ts
 
# Hello World

お疲れ様でした 🚀

プロジェクト等で使用する場合は、フォーマット、リンター、tsconfig.json の設定など、より開発しやすいカスタマイズを加えていただければと思います！

Biome を使用した、フォーマット、リンターの設定したい場合は、下記もぜひ参考にしてみてください！

Prettier + ESLint を卒業して Biome を導入する手順と所感

JavaScript・TypeScriptプロジェクトでPrettierとESLintに代わる新しいツール「Biome」の導入手順を詳しく解説。設定の一元管理、高速なフォーマット・リント機能、VSCo

https://kotukotu-stack-log.com