本篇文章为大家展示了使用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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
