🐐
【TypeScript】TypeScript用のシンプルな開発環境を作る
Next.jsの環境にTypeScriptが一緒になってコンパイルまで一緒にしてくれるも多いですが、
今回はシンプルにTypeScriptだけを学びたかったので、その学習用環境構築を用意したのでメモ。
※node.jsは入っている前提（nvm経由でいれました）
某本で学習する際に下記が紹介されていた。
- node.jsのバージョンを固定したファイルをそのままインストールする方法
-
npm install -g typescriptなどtypescriptをグローバルにインストールする方法
↑個人的には後のことを考えた運用ではないかと思ったので、プロジェクト単位でインストール・切り替えができる方法で練習環境を作りたかった。
npm installコマンド
もう一度npm installコマンドについても調べたのでメモ。
npm install -gコマンド
- Node.jsのパッケージをグローバルに（システム全体で利用可能な）インストールするためのオプション
- 通常、Node.jsパッケージはプロジェクトごとにローカルにインストールされる
- しかし
-gオプションを使用することで、そのパッケージがシステム全体で共有され、どのディレクトリからでも実行できるようになる
デフォルトのnpm installコマンド
-
-gオプション無しのnpm installコマンドならプロジェクト単位でローカルにインストールできる - 通常はグローバルインストールで環境を汚さず、
npm installを活用する
npm install --save-devコマンド
- パッケージを本番環境で使うか、開発環境で使うかの違い
- 練習環境なので今回の場合これでよさそう
- next.jsを例に解説していただいてる記事がわかりやすかった
- 下記の通り
package.jsonへの読み込まれ方が違う
package.json
"dependencies": {
// npm installコマンドを使ってインストールしたパッケージ
},
"devDependencies": {
// npm install --save-devコマンドを使ってインストールしたパッケージ
}
開発環境の構築手順
シンプルなtypescript用の開発環境の構築手順
※node.jsはインストール済みとする
package.jsonファイル作成
npm init -y
TypeScriptのインストール
package.jsonにtypescript用のモジュールを追加
npm install --save-dev typescript
node_modulesのインストール
npm install
typescriptのバージョン表示
npx tsc -v
-
npxはローカルインストールしてプロジェクトのnode_modulesにインストールされたコマンド（実行ファイル）を実行するためのツール - グローバルインストールしない限り
tsc -vだけで実行はできないけど、グローバル環境汚さないためにこれでいい。
TypeScriptのコマンド
- ファイルをES6でコンパイルしつつ、wacthする
npx tsc index.ts --target ES2022 --watch
ターミナル上で実行
node ./{ファイルパス}
参考
Discussion