[A-00108]TypeScriptでExpressを使用してみる

前回記事はjsでの簡単なexpress開発でした。

[A-00107]ExpressでRestAPIを作成する

次はtypescriptで同じことをやってみようと思います。

typescriptの環境構築はこちらも参考

[A-00106]TypeScriptを使ってみた

参考文献はこちら

https://qiita.com/zaburo/items/69726cc42ef774990279

またnpm公式も参考にしました。

https://www.npmjs.com/package/@types/node

・環境構築

まずは適当なディレクトリを作成して、そこにnodeの稼働環境、typescriptの稼働環境を作ります。

mkdir express_test2 && chmod 777 express_test2
cd express_test2

npm init -y

npm install -D typescript

npm install --save @types/node

npm install -D ts-node

次にexpressのパッケージをインストールしていきます。

npm install express

npm install --save @types/express

次にtypescriptの初期化コマンドを実行します。

npx tsc --init

・簡単なRestAPIを作成してみる

前回も作成したRestAPIを作成してみます。

適当なtsファイルを作成します。

touch restapi.ts && chmod 777 restapi.ts

import express from 'express'
const restapi: express.Express = express()

restapi.listen(8080, () => {
    console.log("Request Listening...")
});

// GET
restapi.get('/', (req: express.Request, res: express.Response) => {
    res.json({"message": "recieved TS GET Request."});
    console.log("TS GET activate!");
    res.end();
});

// POST
restapi.post('/', (req: express.Request, res: express.Response) => {
    res.json({"message": "recieved TS POST Request."});
    console.log("TS POST activate!");
    res.end();
});

// PUT
restapi.put('/', (req: express.Request, res: express.Response) => {
    res.json({"message": "recieved TS PUT Request."});
    console.log("TS PUT activate!");
    res.end();
});

// DELETE
restapi.delete('/', (req: express.Request, res: express.Response) => {
    res.json({"message": "recieved TS DELETE Request."});
    console.log("TS DELETE activate!");
    res.end();
});

実行結果は下記のとおり、javascriptとほとんど変わりません。

MacBook-Pro:js$ curl -X GET http://localhost:8080/
{"message":"recieved TS GET Request."}
MacBook-Pro:js$ curl -X POST http://localhost:8080/
{"message":"recieved TS POST Request."}
MacBook-Pro:js$ curl -X PUT http://localhost:8080/
{"message":"recieved TS PUT Request."}
MacBook-Pro:js$ curl -X DELETE http://localhost:8080/
{"message":"recieved TS DELETE Request."}

MacBook-Pro:express_test2$ npx ts-node restapi.ts 
Request Listening...
TS GET activate!
TS POST activate!
TS PUT activate!
TS DELETE activate!

若干コード量が多いくらいですかね。typescriptの利点をあまり知らないのでこれから掘り下げていきたいと思いす。