【express】TypeScriptでNode.jsプロジェクト作成

ディレクトリを作成する

任意のディレクトリ配下

①プロジェクトディレクトリを作成
②ディレクトリに移動
③app.tsファイルを作成
④vscodeでディレクトリを展開

mkdir node-ts-lesson
cd node-ts-lesson
touch app.ts
code .

プロジェクトの初期化

package.jsonの作成

npm init

以下問われるが全てエンターでOK

package name: (re_start_node) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 

// 以下の内容のpackage.jsonが作成される
About to write to 〜/node-ts-lesson/package.json:

{
  "name": "re_start_node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

ここでGit連携をしたければ行う。

tsconfig.json作成

tsc --init

tsconfig.jsonが作成される(変更箇所一部抜粋)

"target": "es2021",
"module": "commonjs",  

// モジュールのインポートをどのように解決するか
"moduleResolution": "node",

// TypeScriptからコンパイルされたJavaScriptを実行
"outDir": "./dist",

// TypeScriptフォルダ
"rootDir": "./src",

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

expressとbody-parserとnodemonをインストールする。
body-parserはクライアント経由でサーバーに送信されたデータを取得できる。
nodemonはファイルの変更を監視して自動で更新してくれる。

npm install --save express body-parser nodemon

サーバーを立ち上げるためのコード

const express = require('express')

const app = express()

app.listen(3000)

TypeScriptがNode.jsのrequireを解決できないためエラーが出る。


指示に従って、 @types/node をインストール

npm i --save-dev @types/node

エラーは消えるがもう一点問題がある。
appの後に . を打っても自動補完が効かない。
そのため、expressの型定義をインストールする必要がある。

npm i --save-dev @types/express

しかしappの型定義がまだany型のまま。
つまり、expressの型定義が適用されていない。


requireをESModuleのimport文に変えてみると補完が効く。


TypeScriptではESModuleの記法を使う。
requireはcommonJSの規格になるため補完が作用しない。

TypeScriptコンパイラーの起動と、サーバーの起動

TypeScriptコンパイラーをwatchモードで起動

tsc -w

ファイルを保存するたびにJavaScriptファイルにコンパイルされる（dist/app.js）

ローカルサーバーの起動

npm scriptsの変更
nodemondでサーバーを立ち上げるためのスクリプトを追加。
nodemonはファイルの変更を監視して、自動でサーバーを更新してくれる。

// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon dist/app.js" // 追加
},

サーバーの起動
※tsc -w でwatchモード起動中のためターミナルに新しいタブを追加する。

npm start

これでプロジェクトの基本的なセットアップは完了。

参考資料

【世界で7万人が受講】Understanding TypeScript 日本語版

TypeScript をNode.jsでどう使うか解説があります。
TypeScriptの基礎から応用までの細かい解説もあります。