Translate

2020年3月2日月曜日

VSCodeでTypeScriptを軽く触る時の最低限のメモ

◆達成したいこと。

ちょっとTypeScriptを使ってコードを書いて見たい場合に、
html/js/TypeScriptのいずれも保存時自動で更新するようにしたい

◆やったこと
html/jsの保存時、自動更新は拡張機能のLive Serverを使用
TypeScriptについては以下のようにした

VSCodeでプロジェクトのルートフォルダを開くためcodeコマンドを実行
$ code フォルダパス

TypeScriptとをインストール
$ npm i typescript


package.jsonを作成
$ npm init -y

package.jsonにtscコマンドを指定
  "scripts": {
    "watch": "tsc -w"
  },

フォルダ構成
下記のようにしたいので
├── node_modules
├── src
│ ├─js
│ ├─ts
│ └─index.html
├── package-lock.json
├── package.json
└── tsconfig.json

tsconfig.jsonを作って場所を設定する
$ tsc --init
"outDir": "./src/js",


後は、Live Serverを起動した状態で、
$ npm run watch でtsの保存を監視してコンパイルさせるようにする

0 件のコメント: