Express+TypeScriptをはじめるときにやったこと

Expressでサーバ立てたいなと思ったので、
TypeScriptではじめるときにやったことの備忘録。

TypeScriptの設定

まずは、package.jsonから。

# package.jsonの生成
$ npm init

# typescriptのインストール
$ npm i -D typescript @types/node

# バージョン確認
$ npx tsc -v

# ts初期化: tsconfig.json生成
$ npx tsc --init

tsconfig.jsonの設定する。

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2019",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

開発で使うものを入れる。

$ npm i -D ts-node ts-node-dev rimraf npm-run-all

package.jsonのscriptsをセットアップ。

// package.json
{
  "main": "dist/index.js",
  "private": true,
  "scripts": {
    "dev": "ts-node-dev --respawn src/index.ts",
    "clean": "rimraf dist/*",
    "tsc": "tsc",
    "build": "npm-run-all clean tsc",
    "start": "node ."
  },
}

ts-node-devを使うと、watchできるようになる。
ただ、リロード時に通知されるので通知をOFFにしておくため、 .node-dev.jsonを作成

//.node-dev.json
{
  "notify": false
}

とりあえず、Hello Worldするためのコード(index.ts)を追加。

# テスト用のコード
$ mkdir src
$ echo 'console.log("Hello World");' > src/index.ts

実行してみる。

# ts-nodeで実行
$ npm run dev
# => Hello World

# ビルドして、nodeで実行
$ npm run build && npm run start
# => Hello World

これでTypeScriptの設定は完了。

Expressの設定

Expressが使えるように設定していく。

まずは、インストール

$ npm i express body-parser cookie-parser
$ npm i -D @types/express @types/cookie-parser

src/index.tsにExpressを追加していく。

// src/index.ts
import Express from "express";
import bodyParser from "body-parser";
import cookieParser from "cookie-parser";

const port = process.env.PORT || 3000;

const app = Express();

// POSTのBODYにJSONを使うため、body-parserを有効化
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cookieParser());

// routes
app.get("/", async (req: Express.Request, res: Express.Response) => {
  try {
    res.end("Hello World");
  } catch (error) {
    console.error(`Error: ${error}`, error);
    res.status(500).send({ error: `${error}` });
  }
});

// listen
app.listen(port, () => {
  console.log(`listening on port ${port}!`);
});

export default app;

あとは、実行。

# 開発時
$ npm run dev

# ビルド＆スタート
$ npm run build && npm run start

以上！！

くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Express+TypeScriptをはじめるときにやったこと

TypeScriptの設定

Expressの設定

参考