1. 前言

作為前端開發(fā)人員而言，ts已經(jīng)成為了一項(xiàng)必不可少的技能，類型檢查可以幫助我們再開發(fā)時避免一些不必要的bug，而且ts支持的類和裝飾器等語法也更逼近后端語言，更適合服務(wù)器的開發(fā)。
本文將從零開始，搭建一個集成ts和eslint語法檢查的express服務(wù)器。

2. 初始化express框架

我們可以使用官方提供的express生成器來快速生成express框架。
當(dāng)然，express的初始化內(nèi)容并不復(fù)雜，你也可以從一個app.js開始搭建自己喜歡的框架模式。

# 使用express生成器之前必須全局安裝過express-generator
$ npm install -g express-generator

# --view后面是確定你使用哪種視圖引擎，server是你工程的名稱
$ express --view ejs server

# 生成的工程并不會默認(rèn)給我們添加git，這里我們使用git init初始化一下
$ git init

初始化完成后我們添加一個.gitignore文件

node_modules/
dist/

3. 添加TS支持

全局安裝TS

ts本身屬于js的超集，node和瀏覽器并不認(rèn)識，執(zhí)行前需要先編譯成js，所以沒有全局安裝過ts的需要先全局安裝一下

$ npm install -g typescript

安裝express類型依賴

express是基于node環(huán)境的，所以我們需要安裝兩個類型依賴，以獲得相關(guān)api的類型提示

$ npm install @types/node --save-dev

$ npm install @types/express --save-dev

配置tsconfig.json文件

在項(xiàng)目根目錄下新建tsconfig.json文件，outDir表示打包輸出路徑

{
 "compilerOptions": {
  "target": "es2016",
  "module": "commonjs",
  "lib": ["es2016","dom"],
  "outDir": "./dist",
 },
 "exclude": ["node_modules"]
}

這里如果包含了include或者files選項(xiàng)，將不會默認(rèn)編譯所有ts文件。

接下來我們可以把項(xiàng)目的所以js文件的后綴改為.ts，然后直接在命令行運(yùn)行

$ tsc

默認(rèn)會找到根目錄下的tsconfig.json文件，按照配置幫我們進(jìn)行編譯，編譯完成我們可以看到dist文件夾已經(jīng)將所有ts文件編譯成了js文件，而且保持了原來的目錄結(jié)構(gòu)。

接下來我們將目錄下的其他資源也放入dist文件夾下，然后運(yùn)行

$ node ./dist/bin/www

這時我們的服務(wù)已經(jīng)可以正常啟動了，但是在開發(fā)時如果每次運(yùn)行都要進(jìn)行編譯->將資源文件移入->運(yùn)行命令的流程，那也太繁瑣了，所以接下來我們再添加一個第三方庫ts-node。

使用ts-node將ts文件編譯在內(nèi)存中

在使用ts-node之前需要進(jìn)行全局安裝

$ npm install ts-node -g

# 用ts-node直接運(yùn)行項(xiàng)目，這個庫會將我們的ts文件編譯成js文件保存在內(nèi)存中進(jìn)行引用
$ ts-node ./bin/www

雖然ts-node可以幫我們直接運(yùn)行ts文件，但在開發(fā)完成后部署在生產(chǎn)環(huán)境時，還是推薦使用tsc打包出來的js文件會更加穩(wěn)定。

使用nodemon進(jìn)行熱更新

全局安裝nodemon

$ npm install nodemon -g

# 執(zhí)行命令運(yùn)行項(xiàng)目
$ nodemon -e ts --exec ts-node ./bin/www

-e：表示指定觀察列表 (Specifying extension watch list)
--exec：代表命令行形式執(zhí)行命令

配置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團(tuán)隊(duì)給出的答案，目前推薦使用的是typescript-eslint。

為項(xiàng)目配置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

關(guān)于eslint初始化的步驟還是比較簡單易懂的，這里不展開敘述，關(guān)鍵一條：Does your project use TypeScript? · Yes

使用eslint命令行初始化后的項(xiàng)目還并沒有開啟對于ts相關(guān)語法的檢查，這里需要在.eslintrc.js文件增加兩條配置

extends: [
 'standard',
 'eslint:recommended',
 'plugin:@typescript-eslint/recommended'
]

接下來我們會看到ts文件的一堆報錯，就可以愉快的安裝ts語法進(jìn)行修改啦！

提示：ts對于commonjs的模塊化語法并沒有完全的支持，所以在使用require和module.exports時很容易遇到各種報錯，官方也

推薦了一些解決方式，這里推薦啟用ES模塊導(dǎo)入模式

{
 "compilerOptions": {
 ...
  "esModuleInterop": true
 }
}

這樣就可以在項(xiàng)目中使用es6的import和export進(jìn)行模塊化了，ts在編譯時會根據(jù)環(huán)境對我們的代碼進(jìn)行兼容性編譯。

5. 小結(jié)

本文是本人在搭建自己express服務(wù)器并集成ts開發(fā)時所記錄的一些操作，如有錯誤之處，還請多多指點(diǎn)！

 到此這篇關(guān)于使用TS來編寫express服務(wù)器的方法步驟的文章就介紹到這了,更多相關(guān)TypeScript  express服務(wù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論