TypeScriptを試してみる
デスクトップアプリを作る際にWebViewを使う機会があって、
こうなるとフロントエンドの技術について多少なりとも知ってないと難しいなーって感じたから、
ちょっとTypeScript触ってみる。
最近やとdenoが話題っぽいけど、とりあえずは情報が多いnodeで。
この記事を参考にやってみる。
環境
Windows 10 64bit
node v12.18.3
npm 6.14.6
typescript Version 4.0.2
気になったことを調べてメモる
TypeScriptってなに？
参考
npm install の --save-dev ってなに？
ローカルインストールのことらしい。ローカルインストールの反対はグローバルインストール。
グローバルインストールは名前の通り、グローバル環境へのインストールのことで、PCのグローバル環境へのインストールになる。
影響範囲はそのPC内のプロジェクト全体で、どのプロジェクトでも絶対に使うようなツールはこの方法でのインストールがいいと思う。
逆に、開発中のプロジェクト・パッケージでしか使わないライブラリはローカルインストールがいい。
ってことで、基本的には--save-devを付けてローカルインストールでいいと思う。
実際は -g を付けなければローカルインストールになる。ってのも見かけた。
--save-dev っぽいオプションとして、--saveもある。
二つの違いは、プログラム実行時に必要か、開発時だけで必要かの違い。
--save-devは開発時だけで必要という宣言になるから、実行時のinstallではインストールされない。
参考
webpackってなに？
最近の開発はだいたいモジュール毎にファイルを分けて管理しやすくし開発する手法がメインになってる。
ただJavaScriptは実行環境がほかの言語と異なったりしてて、モジュール分けが難しい。
具体的にはグローバルに名前を使うので予期しない影響が発生しやすい。
これを解決しながら複数のファイルを一つにまとめてくれるのがwebpack。
参考
npxってなに？
端的に言うと、npmで扱えるパッケージを実行するためのツール。
グローバル環境にインストールしてコマンドとして使うのがそれまでの手法やったけど、
グローバル環境に入れてしまうと複数のプロジェクトで同じバージョンを使わなくてはいけなくなり、
不具合の温床にになる。
これを回避するために便利なのが、ローカルにインストールしたパッケージを実行するnpx。
たしかに、Cordovaでアプリ作ってた頃はこんな便利なものはなかったから、
cordovaはグローバルに入れてたし、なるべく更新しないようにしてたなー。という遠い記憶。
参考記事中の $ npm run tsc は $ npx tsc でも可能。
$ npm run tsc は何を実行しているの？
$ npm run tsc とみると、tscを直接実行しているように見えるけど、npmにそんな機能はない。
$ npm run tsc で実行しているのは、package.jsonで設定したscriptsの項目の内容で、
今回は "tsc": "tsc" となっているから、外からみたら tsc が叩かれているように見える。
この設定を忘れていると $ npm run tsc は動かないから、
どこでも動くように $ npx tsx にしたほうが建設的かも。
成果物
更新履歴
2020/09/13 公開