從零開始學typescript構建一個rest風格web服務

lifefriend_007發表於2019-01-04
TypeScriptRESTWeb

隨著應用的龐大，專案中 javascript 的程式碼也會越來越臃腫，團隊之間的協作也會遇到難題，如果不一直看 api 文件，很難知道團隊其他成員寫的方法需要什麼引數，返回結果又是什麼。

解決的方案有很多，這裡不比較各種方法的優劣，僅說下選擇 typescript 的考慮：1、接受程式好，ts 檔案中可以直接寫 javascript 程式碼，平滑過渡；2、vs code 的提示夠好。

下面開始一步一步地搭建 web 服務( windows環境 )

一、typescript 開發環境如何配置

1、初始化專案

yarn init -y
複製程式碼

2、安裝 typescript

yarn add typescript @types/node --dev
複製程式碼

3、配置 typescript 編譯環境

在專案根目錄下新建檔案 tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "outDir": "./dist",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [         
       "es6"
    ],
    "noImplicitAny": false,
    "sourceMap": false,
    "allowJs": true
  },
  "include": [        
    "./src/**/*"
  ],
  "exclude": [ 
    "node_modules" 
  ] 
}
複製程式碼

4、測試

新資料夾 src 並新增檔案 server.ts，在檔案中寫下如下程式碼

console.log("Hello TypeScript");
複製程式碼

5、編譯

.\node_modules\.bin\tsc
複製程式碼

6、執行

node ./dist/server.js
複製程式碼

如果能看到控制檯輸出

Hello TypeScript
複製程式碼

恭喜你，typescript 環境配置成功！

二、整合 web 開發框架 koa

1、安裝 koa 及 types

yarn add koa koa-router koa-static @types/koa @types/koa-router @types/koa-static
複製程式碼

2、修改 server.ts 檔案，輸入如下內容

/*
 * @Description: 後臺服務入口
 * @version: 0.1.0
 */
import * as Koa from 'koa';
import * as koaStatic from 'koa-static'
import { router } from './router';    

const app = new Koa();    

/**
 * @name: 設定靜態資源目錄
 * @param : undefined
 * @return : undefined
 */
app.use(koaStatic('./www'));    
/**
 * @name: 使用路由
 * @param : undefined
 * @return : undefined
 */
app.use(router.routes());    
/**
 * @name: 服務埠
 * @param : undefined
 * @return : undefined
 */
const httpPort = 8080
app.listen(httpPort);    
console.log(`Http Server running on port ${httpPort}`);
複製程式碼

3、新建路由資料夾 router 及檔案 index.ts

/*
 * @Description: 後臺路由元件
 * @version: 0.1.0
 */
import * as Router from 'koa-router';    

const router = new Router();

router.get('/*', async (ctx) => {
  ctx.body = 'Hell koa';
})

export { router }
複製程式碼

4、編譯、執行

開啟瀏覽器，輸入 http://localhost:8080

瀏覽結果

如果能看到 Hello Koa，恭喜你，koa 的整合成功。一個簡單的 web 服務就實現了。

目錄結構如下：

目錄結構

相關文章