ExpressをTypescriptで書く

インストール

Express, Typescript, webpackをインストール

yarn add express
yarn add -D @types/express typescript ts-loader webpack webpack-cli

ファイルの変更を検知してnode再起動してくれる nodemon をインストール

yarn add -D nodemon

Webpackの設定

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/server.ts',
  target: 'node',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        loader: 'ts-loader',
        test: /\.ts$/,
        exclude: [/node_modules/],
        options: {
          configFile: 'tsconfig.json',
        },
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: 'server.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

tsconfig

なんでもいいと思います。

{
  "compilerOptions": {
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "lib": ["es2018", "dom"],
    "moduleResolution": "node",
    "removeComments": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "strictFunctionTypes": false,
    "strictNullChecks": true
  }
}

express

動作確認程度。 src/server.ts

import * as Express from 'express';

const app = Express();

app.get('/', (req: Express.Request, res: Express.Response) => {
  return res.send('Hello world.');
});

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

export default app;

起動

package.json に起動用のコマンドを追加。

webpack —watch してnodemon でoutput先を見張ります。

{
  "scripts": {
    "dev": "webpack --config webpack.config.dev.js --watch & nodemon ./dist/server.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.0",
    "nodemon": "^1.19.1",
    "ts-loader": "^6.0.4",
    "typescript": "^3.5.2",
    "webpack": "^4.35.2",
    "webpack-cli": "^3.3.5"
  }
}

以上です。

Githubに公開しておきました↓

github.com