Express with TypeScript | Getting Started

>> 發文日期 : 2023/8/10

> 說明

終於還是要來整理一下Express的筆記,從2019年開始接觸後端到現在,雖然一直主要都是在做前端的開發,但有許多side project都還是全端開發的模式,也累積了一些不錯的經驗,來為以後踏入全端工程師的道路做準備。


> 環境

因為現在主要開發都已經轉向typescript了,這次當然也是要使用typescript來開發,所以我們先來設定一下typescript的環境。

接下來就是安裝Express了,當然除了Express之外,我們也要安裝一些常用的套件,像是cors、helmet、express-validator、dotenv、body-parser等等。

這些套件都是我在開發時常用到的,也簡單解說一下這些套件的功能:

  • cors

    處裡跨領域存取的問題,通常我們會遇到的狀況是前後端分別在不同的網域,當然你的API不希望被其他網域存取,所以我們可以透過cors來設定哪些網域可以存取。

  • helmet

    增加一些安全性的設定,像是防止XSS攻擊、防止點擊劫持等等,這邊就不多做介紹,有興趣的可以參考官方文件。

  • express-validator

    處理格式驗證,當Client端傳送資料到後端時,我們可以透過這個套件來驗證資料是否符合我們的格式。

  • dotenv

    處理環境變數,當我們需要在不同的環境下使用不同的變數時,我們可以透過dotenv來設定。

  • body-parser

    用來解析請求的資料。


> STEP. 1 建立Express Server

首先我們先來建立一個Express Server,這邊我們先建立一個index.ts檔案,當然我們不會只是開個簡單的Express Server而已,我們還需要針對剛剛上述提到的套件進行設定,並且開一個server的API出來。

首先我們先來看一下index.ts的內容:我們把helmet、cors、body-parser這些套件透過middleware的方式加入到Express,並且設定一個server的API,這時我們就可以在http://localhost:4002/server的連結使用API了。

> STEP. 2 建立schema

接下來我們要來建立一個API的格式,這個格式主要是用來驗證Client端傳送的資料是否符合我們的格式,當然你不會希望Client端傳送不符合格式的資料過來導致不可預期的錯誤,所以我們需要在第一關就先驗證資料的格式。

> STEP. 3 建立API route

當驗證的工作設定完後,就要正式進入API的環節了,先附上程式碼:

首先我們先建立在/server的API下的GET跟POST功能,並加入上一步驗證的schema,在GET的功能中我們只是簡單的回傳一個json,所以當你直接在網址打上http://localhost:4002/server時,就會看到一個JSON的回傳。

至於POST的功能在第一步我們就要先針對剛剛驗證的結果進行判斷,如果有錯誤的話就會像前端回傳錯誤訊息,接下來我就會把使用者在client端傳送的資料回傳回去,去驗證後端是否得到相對應的資料。


> STEP. 4 執行

最後當我們把整個後端跑起來後,可以去驗整GET跟POST的功能是否有我們期望的結果出現,如果有的話就代表我們的後端已經完成了。