使用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 相关文章推荐
Jquery replace 字符替换实现代码
Dec 02 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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
PHP 常见郁闷问题答解
2006/11/25 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
php中adodbzip类实例
2014/12/08 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python数据类型详解(一)字符串
2016/05/08 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
党员民主评议总结
2014/10/20 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
小学运动会加油稿
2015/07/22 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript