環境
typescript: 4.4.4
node: 15.0.0
npm: 7.0.2
npx: 7.0.2
typescriptのインストール
前提としてnode、npmのインストールは終わっているものとする。
anyenvからnodenvからのnodeインストールがおすすめです。
mkdir sample
cd sample
npm init
npm i typescript
npx tsc -v最近知ったのだが、 npm i packageでnpm install package --saveと等価であるっぽい。これは便利。
installしたtypescriptの実体は./node_modules/.bin/tscとなる。npx tscとすればここを自動的に参照してくれる様子。よってnpx tsc -vでインストールされたtypescriptのバージョンが表示される。
npx tsc が実際どこを参照しているのかを調べるのにはnpx which tscとしてみると良い。
whichパッケージの追加ダウンロードを促されるので、yを押してインストール。
その後npx which tscを実行すると、参照している実行ファイルのフルパスが表示される。
ソースからのコンパイル
インストールが完了したらタイプスクリプトのソースを書く。
私は通常、簡単なサンプルコードはneovimを使って書きます。
neovimでtypescriptのコードハイライトを追加
typescriptのコードハイライトがなかったのでこちらを参考に追加しました。
Vim で TypeScript のカラースキーマに対応する – Qiita
私はneovimのプラグイン管理にはdeinを使っています。dein.tomlに下記のコードを追加。
[[plugins]]
# typescript
repo = 'leafgarland/typescript-vim'これでneovimを起動すると自動的にプラグインがダウンロードされて適用されます。
気持ちよくtypescriptのソースコードsample.tsが書けました。
// sample.ts
function hello(name: string): void {
console.log('hello ' + sekai);
}
let sekai: string = 'world';
hello(sekai);書き上がったsample.tsをtypescriptを使ってコンパイルします。
npx tsc sample.ts実行が終わるとsample.jsが出来上がっています。
// sample.js
function hello(name) {
console.log('hello ' + sekai);
}
var sekai = 'world';
hello(sekai);node sample.jsで実行結果が確認できます。
自動コンパイル
さて、*.tsファイルを編集したあと、毎回コンパイルのコマンドを叩くのは大変です。
これを自動化する手段はtscのパッケージの中に予め備えられています。
npx tsc --initをすると、tsconfig.jsonが生成されます。ここにtscの振る舞いの設定を書けるのですが、ここでは生成を確認するのみでOKです。
tsconfig.jsonがある状態で、npx tsc --watchコマンドを実行します。
すると、以後*.tsファイルの変更があれば即座にコンパイルを実行してくれます。
