使用TS来编写express服务器

时间:2021-1-8 作者:admin

1. 前言

作为前端开发人员而言,ts已经成为了一项必不可少的技能,类型检查可以帮助我们再开发时避免一些不必要的bug,而且ts支持的类和装饰器等语法也更逼近后端语言,更适合服务器的开发。

本文将从零开始,搭建一个集成tseslint语法检查的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的模块化语法并没有完全的支持,所以在使用requiremodule.exports时很容易遇到各种报错,官方也推荐了一些解决方式,这里推荐启用ES模块导入模式

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

这样就可以在项目中使用es6的importexport进行模块化了,ts在编译时会根据环境对我们的代码进行兼容性编译。

5. 小结

本文是本人在搭建自己express服务器并集成ts开发时所记录的一些操作,如有错误之处,还请多多指点!

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。