仕事ですぐに使える TypeScriptを読んでいくその2

TypeScript

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考記事

著作権者：フューチャー株式会社（Future Corporation）様

future-architect.github.io

第 2 章Node.js エコシステムを体験しよう

今日は第2章です。
TypeScriptをやっていくのになぜNode.jsなのか？
playgroundがあるんだしTYpeScriptやるだけなら別に良いのでは？と思うかもしれないですが

言語の知識だけではどうにもなりません。
どこにソースコードを書き、どのようにビルドツールを動かし、どのように処理系を起動し、 どのようにテストを行うかなど、言語周辺のエコシステムを学ばないと、どこから手をつけて良いかわかりません。

とのことです。
前提として周辺の知識を知らなければいけないというのはもっともだと僕も思います。

参考資料では周辺のエコシステムを以下のように位置付けるとのことです。
　• Node.js: 処理系 • npm コマンド: パッケージマネージャ
　• package.json: プロジェクトファイル
　　　　　　　　　 – 依存パッケージの管理
　　　　　　　　 – scripts で開発用のタスクのランチャーとして利用
　• npx コマンド: Node.js 用の npm パッケージで提供されているツールの実行
　• TypeScript 関連のパッケージ
　　　　　　　　　 – tsc: TypeScript のコンパイラ
　　　　　　　　　　　（プロジェクト用の TypeScript の設定ファイルの作成）
　　　　　　　　　 – ts-node: TypeScript 変換しながら実行する、Node.js のラッパーコマンド

npmは大変便利というのは知っていたのできちんと触れる機会があって嬉しい。

Node.js のインストール

公式からでもHomebrew、macportsからでも。
Windowsだと公式からインストーラダウンロードしてきて使うのが手っ取り早そう。

nodejs.org

インストールの確認はバージョン確認用コマンドをターミナルとかPowerShellで叩けば良さそう。 npmも知りたかったので念のため確認している。

$ node --version
v10.16.0
$ npm --version
6.9.0

2.2 package.json の作成と ts-node のインストール

作業フォルダを作って、npm init -yを実行しPackage.jsonを作成する。
package.jsonはNode.jsを使ったプロジェクトのコアとなる部分であり、
プロジェクトがもつ様々な情報や、依存関係、テストなどのタスク実行の情報を持っている。
なので解析にはまずPackage.jsonを見れば効率が良い。

tsnodeとtypescriptをインストールする。

 npm install --save-dev ts-node typescript

うまくインストールされるとpackage.jsonに以下の記述が追加される。
依存関係や必要なツールは何を使っているかわかりやすいですね。

  "devDependencies": {
    "ts-node": "^8.3.0",
    "typescript": "^3.5.2"
  }

2.3 プロジェクトフォルダ共有後の環境構築

gitなどで共有をする際にpackage.jsonや package-lock.jsonが役に立つ。
共有されたコードを手元で実行したい場合はnpmコマンドを使って簡単にインストールできる。

npm install 
npm install --prod
npm ci
npm ci --prod

2.4 インストールしたコマンドの実行

サクッとインタプリタで実行したい場合はこんな感じ

npx ts-node
> console.log('hello world')
hello world

細かな部分はおいおい又戻ってきて確認するようになると思う...

2.5 TypeScript の環境設定

TypeScriptを実行するにはフェーズがあって
それぞれ実行する形になる 　・コンパイル 　・バンドル

特に何もしないでもTypeScriptのコンパイルは実行できるが、
tsconfig.jsonを作って上げることで細かな調整が可能。

2.6 エディタ環境

こけにくいVisual Studio Codeを使おう。

2.7 ts-node を使った TypeScript のコードの実行

VSCodeを使うつもりでしたがそこまでなので、今回はviでコード写経して、
サクッと実行しました。

first.ts  
　const personName: string = ' 小心者';  
　console.log(`Hello ${personName}!`);  

$npx ts-node first.ts
Hello  小心者!

今日はここまで。 明日は3章をやっていきます。