隨著應用的龐大，專案中 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 服務就實現了。
目錄結構如下：
