使用 TypeScript 開發 HapiJS 應用

初始化 npm 項目

yarn init

添加依賴

yarn add hapi

添加開發依賴

要在開發中使用 TypeScrip，同時至少須要有一個工具，能夠一直監聽項目文件的變動，並實時的將變動更新至啓動的服務中，我選擇使用 Nodemon，首先添加如下幾個開發依賴

yarn add typescript -D
yarn add nodemon -D

接下來，咱們須要爲 node 與 hapi 安裝類型定義庫：

yarn add @types/node -D
yarn add @types/hapi -D

安裝完成以後， package.json 文件看起來像下面這樣的：

{
  "name": "hapiserver",
  "version": "0.0.1",
  "description": "API server",
  "main": "index.js",
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "hapi": "^18.1.0"
  },
  "devDependencies": {
    "@types/hapi": "^18.0.2",
    "@types/node": "^12.0.2",
    "nodemon": "^1.19.0",
    "typescript": "^3.4.5"
  }
}

注意：你的 dependencies 與 devDependencies 配置中，版本號可能與個人不一樣。

配置 TypeScript

設計項目文件目錄結構

在項目的根目錄下，建立一個名爲 src 的目錄，用於包含系統的全部源代碼文件，接着，建立一個名爲 dist 的目錄，用於保存由 typescript 編譯後的 javascript 文件。

注意：文件結構並非強制的，你能夠徹底按照本身的習慣和規範來進行

.
├── dist
├── node_modules
├── package.json
├── src
└── yarn.lock

tsconfig.json

TypeScript 會查詢名爲 tsconfig.json 的配置文件來查找項目的入口文件以及編譯設置，關於它的詳細使用說明，能夠從 https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 查閱，在這裏，咱們先填入如下內容：

{
  "compilerOptions": {
    "outDir": "./dist",
    "allowJs": false,
    "target": "es6",
    "sourceMap": true,
    "module": "commonjs",
    "moduleResolution": "node"
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

在 tsconfig.json 文件中，咱們定義了 outDir 的值爲 ./dist，它告訴編譯器，編譯後的輸出目錄爲 ./dist 文件夾，如今能夠直接在項目根目錄執行如下代碼，便可編譯 src 目錄下的 TypeScript 代碼至 dist 目錄下的 JavaScript 文件了。

node_modules/typescript/bin/tsc

用 TypeScript 開發 Hapi 服務應用

在 src 目錄下，建立一個名爲 server.ts 的文件，內容以下：

import * as hapi from "hapi";

// 建立一個服務器，監聽 `localhost` 上的 `8000` 商品
const server: hapi.Server = new hapi.Server({
  host: "localhost",
  port: 8000
});

// 添加路由
server.route({
  method: "GET",
  path: "/hello",
  handler: function(request, h) {
    return "Hello! TypeScript!";
  }
});

// 啓動服務
async function start() {
  try {
    await server.start();
  } catch (err) {
    console.log(err);
    process.exit(1);
  }
  console.log("Server running at:", server.info.uri);
}

// 不要忘記啓動服務
start();

因爲咱們的代碼是由 TypeScript 寫的，因此如今尚未辦法直接運行，須要先將其編譯爲 JavaScript 代碼以後再運行：

使用下面的命令編譯代碼：

node_modules/typescript/bin/tsc

編譯完成以後，將獲得下面這樣的兩個文件：

dist
├── server.js
└── server.js.map

此時，執行下面的代碼，啓動服務：

node dist/server.js

啓動成功以後，終端將顯示：

Server running at: http://localhost:8000

使用 curl 測試一下咱們的服務：

$ curl -i http://localhost:8000/hello
HTTP/1.1 200 OK
content-type: text/html; charset=utf-8
cache-control: no-cache
content-length: 18
accept-ranges: bytes
Date: Fri, 17 May 2019 01:58:50 GMT
Connection: keep-alive

Hello! TypeScript!

已經啓動成功了。

完成全部配置

咱們總不能每改一次代碼，都手工執行一次編譯，再從新啓動服務，能夠在 package.json 中添加兩個命令：

{
  ...
  "scripts": {
    "start": "./node_modules/nodemon/bin/nodemon.js -e ts  --exec \"yarn run compile\"",
    "compile": "tsc && node ./dist/server.js"
  },
  ...
}

如今，只須要在項目根目錄下執行如下代碼，便可啓動一個實時編譯代碼並自動從新服務的開發環境了：

yarn start

它的做用是：nodemon 啓動一個服務，監聽文件的變動，當有任何文件變動以後，執行 yarn run compile 命令（即執行:tsc && node ./dist/server.js，以重啓服務。