前回の記事でJavaScriptでNowを利用できるようになったので、
TypeScript化できるようにしてみる。
それぞれ、GitHubで公開。
- 変更前(JS): zeit-now-minimum-example | GitHub
- 変更後(TS): zeit-now-minimum-example-ts | 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つ。
builds
のsrc
をsrc/
配下のtsに変更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
以上!!
参考にしたサイト様
- Get started Express + TypeScript する - Qiita
- [Node.js] Express を TypeScript で書く - ルーティング編 - Qiita
- TypeScriptでExpress.js開発するときにやることまとめ (docker/lint/format/tsのまま実行/autoreload) - Qiita
- ts-nodeでCLI上でのtypescriptの検証がめっちゃ楽になった話 - ウェブエンジニア珍道中
- TypeScript超入門:とりあえず動く環境を作る - Qiita
- now-examples/typescript at master · zeit/now-examples