動作環境
- macOS Mojave
- node v12.14.1
- npm 6.13.4
- express 4.16.4
- typescript 3.8.2
最終的なコード
最終的なコードは以下に上げてあるので、先に見たい方は御覧ください。
https://github.com/jumperson/quick-start-express-typescript
作成手順
JavaScriptのExpressアプリケーションを作成する
Express のアプリケーション生成プログラムに従って作成していきます。
グローバルにexpressをインストールします。
$ npm install express-generator -g
インストールしたコマンドで作業ディレクトリに quick-start-express-typescriptという名のExpressアプリケーションを作成します。
$ express quick-start-express-typescript --git --no-view
npm installを実行し、Expressアプリケーションを起動します。
$ cd quick-start-express-typescript
$ npm install
$ DEBUG=myapp:* npm start
http://localhost:3000/にアクセスし、動作していることを確認します。
不要なViewファイルを削除する
今回はTypeScriptにするファイルを減らすためにViewファイルは削除します。
$ rm -r ./public/
$ rm ./routes/index.js
上記を参照しているコードも修正します。
diff --git a/app.js b/app.js
index d187f73..3aecdc0 100644
--- a/app.js
+++ b/app.js
@@ -3,7 +3,6 @@ var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
-var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
@@ -14,7 +13,6 @@ app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
-app.use('/', indexRouter);
app.use('/users', usersRouter);
module.exports = app;
TypeScriptに書き換える
初めに、以下のコマンドを実行し、TypeScriptに必要なモジュールを追加します。
$ npm install --save-dev typescript @types/node @types/express @types/debug
次に、以下のコマンドで、 tsconfig.jsonを作成します。
$ ./node_modules/.bin/tsc --init
次に、JavaScriptファイルを以下の通りTypeScriptに書き換えます。
./routes/users.js => ./routes/users.ts
import{Request,Response}from"express";/* GET users listing. */exportconstindex=(req:Request,res:Response)=>{res.send('respond with a resource');};./app.js => ./app.ts
importexpress=require('express')import*asusersRouterfrom"./routes/users";constapp=express();app.use('/users',usersRouter.index);exportdefaultapp;./bin/www => ./bin/www.ts
#!/usr/bin/env node
/**
* Module dependencies.
*/importappfrom'../app';import*ashttpfrom'http';import*asdebugModulefrom'debug';vardebug=debugModule.debug('quick-start-express-typescript:server');/**
* Get port from environment and store in Express.
*/constport=normalizePort(process.env.PORT||'3000');app.set('port',port);/**
* Create HTTP server.
*/constserver=http.createServer(app);/**
* Listen on provided port, on all network interfaces.
*/server.listen(port);server.on('error',onError);server.on('listening',onListening);/**
* Normalize a port into a number, string, or false.
*/functionnormalizePort(val:string):number|string|boolean{constnport=parseInt(val,10);if(isNaN(nport)){// named pipereturnval;}if(nport>=0){// port numberreturnnport;}returnfalse;}/**
* Event listener for HTTP server "error" event.
*/functiononError(error:any):void{if(error.syscall!=='listen'){throwerror;}constbind=typeofport==='string'?'Pipe '+port:'Port '+port;// handle specific listen errors with friendly messagesswitch(error.code){case'EACCES':console.error(bind+' requires elevated privileges');process.exit(1);case'EADDRINUSE':console.error(bind+' is already in use');process.exit(1);default:throwerror;}}/**
* Event listener for HTTP server "listening" event.
*/functiononListening():void{functionbind(){constaddr=server.address();if(addr===null){return'';}if(typeofaddr==='string'){return'pipe '+addr;}if('port'inaddr){return'port '+addr.port;}}debug('Listening on '+bind());}TypeScriptをJavaScriptにトランスパイルする
まずは srcディレクトリを用意し、上記の .tsファイルをすべて移動します。
On branch master
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
renamed: app.ts -> src/app.ts
renamed: bin/www.ts -> src/bin/www.ts
renamed: routes/users.ts -> src/routes/users.ts
次に distディレクトリを用意し、 tsconfig.jsonを以下のように変更します。
diff --git a/tsconfig.json b/tsconfig.json
index 54d53fd..b88125a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,7 @@
// "outFile": "./", /* Concatenate and emit output to single file. */
- // "outDir": "./", /* Redirect output structure to the directory. */
+ "outDir": "./dist", /* Redirect output structure to the directory. */
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
次に、トランスパイルのコマンドを追加します。
diff --git a/package.json b/package.json
index 29eaa22..48a62e0 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
"version": "0.0.0",
"private": true,
"scripts": {
- "start": "node ./bin/www"
+ "start": "node ./bin/www",
+ "build": "tsc"
},
"dependencies": {
"cookie-parser": "~1.4.4",
追加したコマンドを実行し、 distディレクトリにJavaScriptのファイルが作成されることを確認します。
$ npm run build
また、 distディレクトリはgit管理不要なので、以下の修正を行います。
diff --git a/.gitignore b/.gitignore
index d1bed12..a031e35 100644
--- a/.gitignore
+++ b/.gitignore
@@ -59,3 +59,5 @@ typings/
# next.js build output
.next
+
+/dist
トランスパイルされたファイルでExpressを起動する
Express起動をコマンドを修正してExpressを起動できるようにします。
diff --git a/package.json b/package.json
index 48a62e0..ee55eb6 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
"version": "0.0.0",
"private": true,
"scripts": {
- "start": "node ./bin/www",
+ "start": "npm run build && node ./dist/bin/www.js",
"build": "tsc"
},
"dependencies": {
ホットリロードの設定
最後に、開発時のコード修正時にホットリロードされるようにします。
以下のモジュールを追加します。
$ npm install --save-dev ts-node nodemon
次にルートに以下のファイルを追加します。
{"watch":["src"],"ext":"ts","exec":"ts-node ./src/bin/www.ts"}次にコマンドを追加します。
diff --git a/package.json b/package.json
index f602cdd..c56097d 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"private": true,
"scripts": {
"start": "npm run build && node ./dist/bin/www.js",
+ "start:dev": "nodemon",
"build": "tsc"
},
"dependencies": {
これで以下のコマンドでExpressが起動し、またコードを修正した際に自動で再起動されるようになります。
npm run start:dev
最終的なコード（再掲）
冒頭でも記載しましたが、最終的なコードは以下に上げてあります。
https://github.com/jumperson/quick-start-express-typescript
参考にしたページ
以下はこの記事の参考にさせて頂いたページです。
- microsoft/TypeScript-Node-Starter: A starter template for TypeScript and Node with a detailed README describing how to use the two together.
- TypescriptでExpressを設定する - Qiita
- nodebestpractices/separateexpress.md at master · goldbergyoni/nodebestpractices
- Express のアプリケーション生成プログラム
- NodeJSでTypeScriptのホットリロード - Qiita