溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了使用TS編寫express服務器，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
1. 前言
作為前端開發人員而言，ts已經成為了一項必不可少的技能，類型檢查可以幫助我們再開發時避免一些不必要的bug，而且ts支持的類和裝飾器等語法也更逼近后端語言，更適合服務器的開發。
本文將從零開始，搭建一個集成ts和eslint語法檢查的express服務器。
2. 初始化express框架
我們可以使用官方提供的express生成器來快速生成express框架。
當然，express的初始化內容并不復雜，你也可以從一個app.js開始搭建自己喜歡的框架模式。
# 使用express生成器之前必須全局安裝過express-generator $ npm install -g express-generator # --view后面是確定你使用哪種視圖引擎，server是你工程的名稱 $ express --view ejs server # 生成的工程并不會默認給我們添加git，這里我們使用git init初始化一下 $ git init
初始化完成后我們添加一個.gitignore文件
node_modules/ dist/
3. 添加TS支持
全局安裝TS
ts本身屬于js的超集，node和瀏覽器并不認識，執行前需要先編譯成js，所以沒有全局安裝過ts的需要先全局安裝一下
$ npm install -g typescript
安裝express類型依賴
express是基于node環境的，所以我們需要安裝兩個類型依賴，以獲得相關api的類型提示
$ npm install @types/node --save-dev $ npm install @types/express --save-dev
配置tsconfig.json文件
在項目根目錄下新建tsconfig.json文件，outDir表示打包輸出路徑
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"lib": ["es2016","dom"],
"outDir": "./dist",
},
"exclude": ["node_modules"]
}這里如果包含了include或者files選項，將不會默認編譯所有ts文件。
接下來我們可以把項目的所以js文件的后綴改為.ts，然后直接在命令行運行
$ tsc
默認會找到根目錄下的tsconfig.json文件，按照配置幫我們進行編譯，編譯完成我們可以看到dist文件夾已經將所有ts文件編譯成了js文件，而且保持了原來的目錄結構。
接下來我們將目錄下的其他資源也放入dist文件夾下，然后運行
$ node ./dist/bin/www
這時我們的服務已經可以正常啟動了，但是在開發時如果每次運行都要進行編譯->將資源文件移入->運行命令的流程，那也太繁瑣了，所以接下來我們再添加一個第三方庫ts-node。
使用ts-node將ts文件編譯在內存中
在使用ts-node之前需要進行全局安裝
$ npm install ts-node -g # 用ts-node直接運行項目，這個庫會將我們的ts文件編譯成js文件保存在內存中進行引用 $ ts-node ./bin/www
雖然ts-node可以幫我們直接運行ts文件，但在開發完成后部署在生產環境時，還是推薦使用tsc打包出來的js文件會更加穩定。
使用nodemon進行熱更新
全局安裝nodemon
$ npm install nodemon -g # 執行命令運行項目 $ nodemon -e ts --exec ts-node ./bin/www
-e：表示指定觀察列表 (Specifying extension watch list)
--exec：代表命令行形式執行命令
配置npm腳本
"scripts": {
"start": "ts-node ./bin/www",
"dev": "nodemon -e ts --exec ts-node ./bin/www",
"build": "tsc",
"server": "node ./dist/bin/www"
}4. 配置eslint
為什么不是tslint？
TSLint is deprecated.
See this issue for more details: Roadmap: TSLint → ESLint. If you're interested in helping with the TSLint/ESLint migration, please check out our OSS Fellowship program.
這是tslint團隊給出的答案，目前推薦使用的是typescript-eslint。
為項目配置eslint
# 未全局安裝的需要全局安裝 $ npm install eslint -g $ eslint --init √ How would you like to use ESLint? · style √ What type of modules does your project use? · commonjs √ Which framework does your project use? · none √ Does your project use TypeScript? · Yes √ Where does your code run? · node √ How would you like to define a style for your project? · guide √ Which style guide do you want to follow? · standard √ What format do you want your config file to be in? · JavaScript Checking peerDependencies of eslint-config-standard@latest Local ESLint installation not found. The config that you've selected requires the following dependencies: @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@>=7.11.0 eslint-plugin-import@>=2.22.1 eslint-plugin-node@>=11.1.0 eslint-plugin-promise@>=4.2.1 eslint-plugin-standard@>=4.0.2 @typescript-eslint/parser@latest √ Would you like to install them now with npm? · Yes
關于eslint初始化的步驟還是比較簡單易懂的，這里不展開敘述，關鍵一條：Does your project use TypeScript? · Yes
使用eslint命令行初始化后的項目還并沒有開啟對于ts相關語法的檢查，這里需要在.eslintrc.js文件增加兩條配置
extends: [ 'standard', 'eslint:recommended', 'plugin:@typescript-eslint/recommended' ]
接下來我們會看到ts文件的一堆報錯，就可以愉快的安裝ts語法進行修改啦！
提示：ts對于commonjs的模塊化語法并沒有完全的支持，所以在使用require和module.exports時很容易遇到各種報錯，官方也
推薦了一些解決方式，這里推薦啟用ES模塊導入模式
{
"compilerOptions": {
...
"esModuleInterop": true
}
}這樣就可以在項目中使用es6的import和export進行模塊化了，ts在編譯時會根據環境對我們的代碼進行兼容性編譯。
上述內容就是使用TS編寫express服務器，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
