使⽤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表⽰打包输出路径
如何搭建git服务器{
"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团队给出的答案，⽬前推荐使⽤的是。
为项⽬配置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和ports时很容易遇到各种报错，官⽅也
推荐了⼀些解决⽅式，这⾥推荐启⽤ES模块导⼊模式
{
"compilerOptions": {
...
"esModuleInterop": true
}
}
这样就可以在项⽬中使⽤es6的import和export进⾏模块化了，ts在编译时会根据环境对我们的代码进⾏兼容性编译。
5. ⼩结
本⽂是本⼈在搭建⾃⼰express服务器并集成ts开发时所记录的⼀些操作，如有错误之处，还请多多指点！
到此这篇关于使⽤TS来编写express服务器的⽅法步骤的⽂章就介绍到这了，更多相关TypeScript  express服务器内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！