使用TS来编写express服务器的方法步骤


Posted in Javascript onOctober 29, 2020

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在编译时会根据环境对我们的代码进行兼容性编译。

5. 小结

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

 到此这篇关于使用TS来编写express服务器的方法步骤的文章就介绍到这了,更多相关TypeScript  express服务器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 #Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 #Javascript
使用jQuery实现购物车
Oct 29 #jQuery
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 #Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 #Javascript
node.js爬虫框架node-crawler初体验
Oct 29 #Javascript
JavaScript实现网页计算器功能
Oct 29 #Javascript
You might like
基于mysql的论坛(1)
2006/10/09 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
js 获取服务器控件值的代码
2010/03/05 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
如何用python处理excel表格
2020/06/09 Python
基于keras中的回调函数用法说明
2020/06/17 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
学生会干部自荐信
2014/02/04 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
公司职员入党自传书
2015/06/26 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
golang在GRPC中设置client的超时时间
2021/04/27 Golang