LoginSignup
1

More than 3 years have passed since last update.

posted at

VSCodeを使って素朴に素朴にNode + TypeScript

学習用に。

必要なもの

事前に準備するもの

  • Node.js
  • VSCode

途中でインストールするもの

  • typescript

手順

1. npm init

いろいろ聞かれますが全部Enterで返事しておきます。

2. npm install typescript --save-dev でTypeScriptのインストール

3. npx typescript --inittsconfig.jsonを生成

4. 生成されたtsconfig.jsonをいじる

  • "sourceMap: true" の行は使いたいのでコメントアウト解除
  • "outDir": "./" の行はコメントアウト解除して"outDir": "./dist" とでもしておきましょう。
  • "rootDir": "./src"などとすることで、ソースファイルのルートディレクトリを設定できます。

あとはそのままでいいんじゃないかなと思います。必要になったら変更で。

5. VSCode上でビルドの設定をする

  1. エディタ上でコマンドパレットを開き(F1)、task configure taskと入力 => 「テンプレートからtasks.jsonを生成」でEnter => 「Others」を選びます。要は./.vscode/tasks.jsonができればいいです。
  2. 下記を参考にビルドタスクを追加します。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上でデバッグの設定をする

  1. エディタ左側のメニューから虫アイコンをクリックし、launch.jsonファイルを作成する
  2. デバッグの種類を聞かれたらNode.jsを選択
  3. 生成された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
const hw: 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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1