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に公開しておきました↓