学習用に。
必要なもの
事前に準備するもの
- Node.js
- VSCode
途中でインストールするもの
typescript
手順
1. npm init
いろいろ聞かれますが全部Enterで返事しておきます。
2. npm install typescript --save-devでTypeScriptのインストール
3. npx typescript --initでtsconfig.jsonを生成
4. 生成されたtsconfig.jsonをいじる
"sourceMap: true"の行は使いたいのでコメントアウト解除"outDir": "./"の行はコメントアウト解除して"outDir": "./dist"とでもしておきましょう。"rootDir": "./src"などとすることで、ソースファイルのルートディレクトリを設定できます。
あとはそのままでいいんじゃないかなと思います。必要になったら変更で。
5. VSCode上でビルドの設定をする
- エディタ上でコマンドパレットを開き(F1)、
task configure taskと入力 => 「テンプレートからtasks.jsonを生成」でEnter => 「Others」を選びます。要は./.vscode/tasks.jsonができればいいです。 - 下記を参考にビルドタスクを追加します。
labelはただの識別名なので適当で。
./.vscode/tasks.json
{//tasks.json形式の詳細についての資料は、//https://go.microsoft.com/fwlink/?LinkId=733558をご覧ください"version":"2.0.0","tasks":[{"label":"typescript build","type":"shell","command":"node ./node_modules/typescript/bin/tsc","group":"build"}]}6. VSCode上でデバッグの設定をする
- エディタ左側のメニューから虫アイコンをクリックし、
launch.jsonファイルを作成する - デバッグの種類を聞かれたらNode.jsを選択
- 生成された
launch.jsonをいじる"program": "${workspaceFolder}\\dist\\index.js"のように変更して、実行するJSファイルのパスを変更。typescriptにより生成されたファイルを実行したいので、distフォルダ内にある(これから作られるのでまだない)index.jsを指定。
デバッグする前にビルドしたいので、"preLaunchTask": "先ほど設定したタスクの適当な名前"を追記。
./.vscode/launch.json
{//IntelliSenseを使用して利用可能な属性を学べます。//既存の属性の説明をホバーして表示します。//詳細情報は次を確認してください:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"type":"node","request":"launch","name":"プログラムの起動","skipFiles":["<node_internals>/**"],"program":"${workspaceFolder}\\dist\\index.js","preLaunchTask":"typescript build"}]}ここまでで環境構築自体は終わりです。お疲れ様でした。参考までにHelloWorldします。
7. ./src/index.tsを作成
./src/index.ts
consthw:string='hello world';console.log(hw);あとはF5キーを押すことで、ビルド => 完了次第デバッグ開始されます。ブレークポイント置けば止まるし、普通にデバッグできます。
実体としてはかなり素朴な内容で、tscでビルドして、終わったらVSCode + Nodeのデバッガでデバッグするというものです。
VSCodeで「デバッグ前のタスク」を実行できるので、これを利用しています。
背景
Vue + TypeScriptをやったことがあるのですが、TypeScriptの設定はvue-cliに任せきりだったので、
Node.js + TypeScriptをシンプルに試してみたかったのでした。
参考
TypeScript + Node.js プロジェクトのはじめかた2019 - Qiita
筆者の環境
- Windows 10
- VSCode 1.14.1
- Node.js v8.12.0