Node.jsにTypeScriptを導入してexpressを使う

Node.jsにTypeScriptを導入してexpressを使う

前提

• VSCodeを使用している
• Node.jsでexpressを使用したことがある
• yarnを使用している

準備

好きなフォルダを作成

mkdir node-typescript

VSCodeで作成したフォルダを開く

code node-typescript

package.jsonを作成

npm init -y

必要なパッケージをインストール

yarn add express 

yarn add -D typescript nodemon ts-node @types/express @types/node  

補足すると、nodemonはリアルタイムでコードの変更を監視してくれる。 @typesから始まるのは型の定義ファイル、 ts-nodeはtsファイルをコンパイルしなくても出力できる。

npm scripts に次のコマンドを追加(バージョンは気にしない)

package.json

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
+   "build":"tsc",
+   "dev": "nodemon  --exec ts-node src/index.ts",
  },


  "author": "",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1",
  },
  "devDependencies": {
    "@types/express": "^4.17.11",
    "@types/node": "^14.14.22",
    "ts-node": "^1.1.1",
    "typescript": "^4.1.3"
  }
}

tsconfig.jsonを作成(nodeを選択)

npx tsconfig.json

ルートにsrcファイルを作りindex.tsを作成

import express from 'express';

const app = express();

app.get('/', (_, res) => {
  res.send('Hello world');
});

app.listen(3001, () => console.log('Server is running'));

次のコマンドを実行し、console に "Server is running" と表示されれば成功

yarn run dev 

次のコマンドを実行し dist が作られれば成功

yarn run build 

localhost:3001 を開いて "Hello World" と表示されていれば成功!

コメント

• これはあくまで一例
• ts-node-devを使ってもOK