TypeScript #1 環境準備
TypeScriptの開発環境を準備するには大きく分けて以下の手順を行う必要性があるので、まずは順番にやっていこうと思います。
- Node.jsのインストール
- Node.jsの環境準備
- TypeScriptのインストール
- ts-nodeのインストール
- ts-node-devのインストール
Node.jsのインストール
まずはすべての始まりnode.jsのインストールからです。
node.jsにはLTS版と最新版の２つが公式サイトよりダウンロードすることができます。
２つのバージョンの違いはだいたいこんなイメージだと思います。
これから、node.jsを使う私レベルでは、最新機能なんてまだまだなので、LTS版を選択しました。仕事でもnode.jsを使う場合は、より安定稼働するLTS版を選ぶはずですので、最新版は一部の最新テクノロジーを追いかける開発者用ではないのかなと思います。
| LTS版 | node.js自体のバグなどがある程度対応が完了した状態。 node.jsを利用しているWebサイト、システムは基本こちらを使う。 |
| 最新版 | node.js開発者がまさに作成したばかりの最新機能が取り込まれている。 バージョンアップもはやく、またnode.jsのバグもある程度は覚悟する必要がある。 |
インストール方法は、公式ページには記載はないのですが、Windows版なら基本インストーラを実行して「次へ」を押していけばたぶん苦労せずに入ります。MacOSはちょっとわからないので、Qiitaの素晴らしい先生の記事を貼っておきます。
私、Q太郎は残念なことに、Linuxを常用しているのでこんな感じで入れました。（実際のコマンドラインはsudoしてください。）
# Node.js本来のインストール
$ apt install nodejs
# npm(Nodeパッケージ管理ツール)のインストール
$ apt install npm早速始めるか！と思いきやnode.jsが古いバージョンだったため、以下のコマンドで更に新しくし直しました。
#n(バージョン管理ツール)のインストール
$ npm -g n
#Node.jsのLTS版のバージョン確認
$ n --stable
#Node.jsのLTS版のインストール
$ n stable
#Node.jsバージョンの切り替え（10.xx→14.15.1）
$ n
#npmのバージョンアップ
$ npm update -g npm
#npmが管理しているパッケージのバージョンアップ
$ npm update -gなんとかこれで、現時点でのLTS版14.15.11になりました。
node.jsの実行環境の整備
TypeScirptというかnode.jsを動作させるために、いくつかの初期設定を行う必要があります。その設定情報がpackage.jsonという設定ファイルにまとめられていますので、そのファイルを作成して設定していきます。
はじめの一歩であればオプション設定はせず標準構成で問題ないかと思います。
#まずはNode.jsを動かすフォルダ（ディレクトリ）の作成(フォルダは任意のフォルダを作ります。)
$ mkdir tptest
$ cd tptest
#Package.jsonの作成（標準のパラメータで作成しています）
$ npm init -y
#package.jsonファイルができた！
$ ls
package.json
TypeScriptのインストール
それではメインのTypeScriptをインストールしていきます。TypeScirptはここでは、Node.jsのパッケージ管理ツールであるnpmを利用してインストールしてみました。
#TypeScriptのインストール(最新版を入れたい場合)
$ npm install typescript
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN tptest@1.0.0 No description
npm WARN tptest@1.0.0 No repository field.
+ typescript@4.1.3
added 1 package from 1 contributor and audited 1 package in 8.533s
found 0 vulnerabilities
#これでTypeScriptが入った！
#確認してみる
#cat package.json
{
"name": "tptest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"typescript": "^4.1.3" #←ここにTypeScriptの記述ができている！
}
}
#TypeScriptのインストール(バージョンを指定したい場合)
$ npm install typescript@x.x.x
#例バージョン3.6.0を入れたい場合
$ npm install typescript@3.6.0
TypeScriptが入ったので、簡単に動作確認していきましょう。
まずは、TypeScirptのプログラムを格納するフォルダを作成し、その中にテストコードを作成してみます。
#プログラムを保存するフォルダの作成
# mkdir src
# cd src
# vi test.ts動作確認用の簡単なソースはこちら↓↓
// test.ts
const message: string = '動かしてみた!!';
console.log(message);
それでは、これを動かしていきましょう。ちなみにTypeScriptはそのままでは実行できません。TypeScriptからJavaScriptに変換するトランスコンパイルをして、出力されたJavaScriptのコードを実行する必要があります。
このトランスコンパイラコマンドである「tsc」はnode.jsを動作させるためのフォルダにできています。なのでパスが通っていないため、フルパスまたは相対パスで指定して実行します。
#トランスコンパイルする
$ ../node_modules/.bin/tsc test.ts
#ls
test.js test.ts
#同じフォルダにtest.jsができた！
#それを実行してみる。
#node test.js
動かしてみた!!
#無事に動きました！！ちなみにトランスコンパイルを実行してできたJavaScriptのコードはこちら↓↓
このレベルだと大きな違いはないですが、1行目のstringがなくなってますよね。
var message = '動かしてみた!!';
console.log(message);ts-nodeのインストール
ここまでで、TypeScriptを作成する最小限の環境を準備することができました。ただ、これで開発するのは非常に手間がかかりません？少しコード書いては、tscコマンドでトランスコンパイルして、できたJavaScriptをNodeコマンドで実行する。
簡単なプログラムでも非常に面倒なのに、これが数百、数千ステップのコードとなるとうんざりしますよね？そこでこれらの作業をまとめて簡単に実行してくれる素敵ツール「ts-node」をインストールしていきます。
#ts-nodeをインストール
#node.jsの実行フォルダに戻る
$ cd ../
#
$ npm install ts-node
npm WARN tptest@1.0.0 No description
npm WARN tptest@1.0.0 No repository field.
+ ts-node@9.1.1
added 9 packages from 43 contributors and audited 10 packages in 2.024s
found 0 vulnerabilitiesそれでは早速動かしてみましょう。動かすときは、以下のようなコマンドを実行します。
# ts-nodeを使ってみる
# npx ts-node ソースファイル
$ npx ts-node src/test.ts
動かしてみた!!
すごく楽になりましたよね？？トランスコンパイルと実行を一つのコマンドで実行してくれます。これならばコード書いて、ts-nodeを実行というよくあるプログラム作成の手順に近づいてきましたね。
ts-node-devのインストール
ts-nodeのおかげで面倒なトランスコンパイル、実行という２つのステップを１つのコマンドで実行できるように改善されました。実はそれだけではないんです。さらに便利になるツールがあるのでそれをインストールしていきましょう。
# ts-node-devのインストール
$ npm install ts-node-dev
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN tptest@1.0.0 No description
npm WARN tptest@1.0.0 No repository field.
+ ts-node-dev@1.1.1
added 83 packages from 59 contributors and audited 94 packages in 7.052s
5 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
それでは実行してみましょう。あれ？ts-nodeと変わらない、、と思われると思います。それではソースを編集してみましょう。
$ npx ts-node-dev --respawn src/test.ts
[INFO] 15:36:30 ts-node-dev ver. 1.1.1 (using ts-node ver. 9.1.1, typescript ver. 4.1.3)
動かしてみた!!
編集したソースはこちら↓↓ ちょっとだけmesegeの文字列を増やしました。
// test.ts
const message: string = '動かしてみた!! ts-node-dev';
console.log(message);それではコンソールに戻って見ると。なんと！！！
ファイル編集した結果がすでに実行されているんです！！！
ts-node-devは、実行すると実行中のままとなり、実行したTypeScriptファイルが更新されると自動的に実行してくれるさらにスグレモノツールとなります。止めたいときは「CTRL+C」などのコマンドキャンセルで止まります。
ts-node、ts-node-dev本当に便利ツールですよね。これでだいぶTypeScriptのプログラム作成が楽にできるようになりました。
$ npx ts-node-dev --respawn src/test.ts
[INFO] 15:36:30 ts-node-dev ver. 1.1.1 (using ts-node ver. 9.1.1, typescript ver. 4.1.3)
動かしてみた!!
[INFO] 15:37:10 Restarting: /home/spike/work/typeScript/tptest/src/test.ts has been modified
動かしてみた!! ts-node-dev
さいごに
今回は、TypeScriptの実行環境の整備方法をまとめてみました。Node.js、TypeScriptはとても開発が盛んなテクノロジーになりますので、この内容もすぐに時代遅れになってしまうかもしれませんが、都度見直していきます。
ちなみにフォルダの移動をしていてよくわからない部分もあると思いますので、今回作成したnode.jsの実行環境のフォルダ構造は以下のような形になりますので、相対パスなどわからなければ参考にしてもらえると嬉しいです。
#大量にnode.js関連のファイルがあるため一部抜粋しています。
work
├── node_modules
└── .bin
└── tsc
└── tsc-node
└── tsc-node-dev
├── package-lock.json
├── package.json
└── src
├── test.js
└── test.ts