くらげになりたい。

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

ZEIT/NowでTypeScriptしてみる

前回の記事でJavaScriptでNowを利用できるようになったので、
TypeScript化できるようにしてみる。

それぞれ、GitHubで公開。

TypeScript化するためにやったこと

NowはTypeScripのままデプロイしても、動くっぽい。
なので、自分のソースのTS化とnow.jsonの設定だけすればOKのよう。

1. Expressの型定義を追加
# expressのtypesをインストール
$ npm install --save-dev @types/express
2. index.jsのTypeScript化

TypeScript化したソースが以下。あわせて、src配下に移動している。
(./index.js -> ./src/index.ts)

import { Request, Response } from "express";
import Express from "express";

const app = Express();

app.get("/", (req: Request, res: Response) => {
  res.send("Hello, World!");
});

export default app;
3. now.jsonの設定変更

主な変更点は2つ。

  1. buildssrcsrc/配下のtsに変更
  2. routesを追加。src/配下に配置したので、ルーティングの設定を追加する
{
  "version": 2,
  "name": "express",
  "builds": [{ "src": "src/**/*.ts", "use": "@now/node" }],
  "routes": [{ "src": "/(.*)", "dest": "/src/$1" }]
}
4. tscofig.jsonを作成

TypeScriptを使うので、tscofig.jsonを配置。
GitHubのサンプルでは、公式サンプルの例を拝借。

実行やデプロイは同じ

以下のコマンドを実行すると、ローカルで実行できるし、デプロイもできる、

# ローカルで実行: localhost:3000で起動できる
$ now dev

# デプロイ
$ now

以上!!

参考にしたサイト様