使用Typescript來搭建Koa項目

Photo by Yerlin Matu on Unsplash

Koa是一個非常棒的Web服務程序框架，但是它默認使用Javascript來作為開發語言，而Javascript這種弱類型的動態語言若使用不當，其實會給項目帶來很多意想不到的問題。其實我們是可以使用更加穩固的Typescript語言來開發使用Koa框架的服務程序的，而搭建這樣的一個工程並不複雜，下面來介紹一下如何搭建。

注：該示例項目已經上傳到Github，你可以訪問https://github.com/mattxlee/tutorial_websrv來獲取代碼，但是我強烈建議你照著文章的內容做一遍，這樣能夠幫助你更好的理解和記憶。

搭建

首先我們創建一個空的目錄，叫做websrv吧，在終端裏輸入以下的命令：

mkdir websrv

目錄建立完成後，讓我們切換到這個目錄：

cd websrv

使用npm命令來初始化當前的目錄。執行初始化命令，npm會詢問你一些關於當前項目的問題，全部使用默認的回答就好，所有的問題都直接按下回車鍵即可：

npm init

這時在websrv目錄裏就有一個package.json文件。非常好，我們使用npm來安裝koa相關的一些必要的包：

npm i --save koa koa-router

執行完koa相關的包的安裝後，這時websrv目錄中多出了package-lock.json文件和node_modules目錄；到此為止，這些步驟都是使用Javascript來編寫Koa項目需要做的事情。

現在，我們來初始化Typescript的配置文件，直接使用tsc命令來初始化一個tsconfig.json文件，這個文件包含了Typescript相關的編譯選項。

tsc --init

好的，這時使用我們的VSCode來打開當前的目錄，若你的VSCode執行文件已經在執行搜索路徑中的話，直接可以輸入以下命令啟動VSCode並自動切換到當前的目錄：

code .

在VSCode中，我們找到tsconfig.json這個文件，打開後會發現，已經預置了Typescript相關的選項在裏面，大部分都被注釋起來了。現在我們需要對這個文件進行一些修改。

1. 因為Koa需要async和await這兩個關鍵字的支持，這兩個關鍵字需要最低的Javascript的版本為es2015，所以我們將target項的值修改為es2015；
2. 編譯後生成的Javascript文件我們放到工程目錄下的dist目錄，所以我們修改outDir項目的值為./dist；
3. 項目sourceMap的值修改為true，然後記得取消掉這一行的注釋；
4. 然後，我們需要添加一個和compilerOptions同級的項目，名為include，類型是一個數組，然後添加唯一的一個元素./src/**/*；

修改好了這個tsconfig.json文件後，刪除掉那些注釋掉的項目，你的文件內容應該和下面顯示的內容一樣：

tsconfig.json文件內容

然後接下來，我們需要安裝koa和koa-router的類型描述文件，VSCode需要這些文件來獲取koa和koa-router相關的符號內容，這樣在編寫代碼的時候就會提供給你詳盡的代碼補全提示。在終端裏執行以下命令：

npm i --save-dev @types/koa @types/koa-router

一切都準備完畢，我們現在開始使用Typescript來寫一個最簡單的Web服務程序吧。在工程目錄下建立一個src/app.ts文件，然後按照使用VSCode，按照下圖中的內容輸入：

一個最簡單的使用Typescript的Koa服務程序 — app.ts

這個是Koa最基礎的服務器代碼了，使用了koa-router來處理路由，並且在GET /的時候顯示Hello world文字。讓我們編譯這個Typescript代碼，在終端中輸入tsc命令：

tsc

回車後，你會發現在當前的工程目錄中建立了一個名稱為dist的目錄，這個目錄中應該包含有兩個文件：app.js和app.js.map。app.js文件，就是Typescript編譯器把你的app.ts按照你的需求生成的Javascript文件。我們直接使用Node.js來執行這個app.js文件：

node dist/app.js

然後打開你的瀏覽器，在地址欄輸入http://localhost:3003回車，你應該能在瀏覽器中看到Hello world字樣。

調試

調試是在開發過程中必不可少的一個環節，而事實上，使用VSCode來調試Typescript代碼是非常的簡單愉悅的，下面我們來配置一下：

1. 首先我們打開VSCode的調試窗口，若你在使用MacOS，可以使用快捷鍵：SHIFT+CMD+D；
2. 我們點一下那個齒輪按鈕，然後打開launch.json文件，用以配置我們的調試入口；
3. 在launch.json文件中，我們設置項目program的值為：${workspaceFolder}/src/app.ts
4. 保存launch.json文件，這時切換回app.ts文件；
5. 我們使用鼠標，在第11行的行首單擊設置一個紅色的斷點；
6. 然後在左邊的調試窗口中，單擊Launch Program左邊綠色的小按鈕，啟動調試器；
7. 這時，你會看到程序執行到了第11行並且停在這裏，在左邊可以檢查所有相關的變量值，還有當前的堆棧信息也一並顯示在堆棧窗口中。你可以在Watch中添加你關心的變量，也可以查看所有的斷點的信息等。

調試Typescript代碼

到此為止，你已經知道如何使用Typescript來編寫基於Koa這個Javascript庫的程序了，你甚至也知道如何配置調試器並且知道如何調試Typescript程序了。非常好，祝你玩得開心！