Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8922

TypeScriptのExpressアプリケーションを作る

$
0
0

動作環境

  • 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

参考にしたページ

以下はこの記事の参考にさせて頂いたページです。


Viewing all articles
Browse latest Browse all 8922

Trending Articles