使用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 相关文章推荐
JavaScript获取URL汇总
Jun 08 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
区分vue-router的hash和history模式
Oct 03 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
纯js简单日历实现代码
2013/10/05 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
python实现多张图片拼接成大图
2019/01/15 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
结婚典礼证婚词
2014/01/11 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
心理健康日活动总结
2014/05/08 职场文书
关于环保的建议书
2014/05/12 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
Python图片检索之以图搜图
2021/05/31 Python
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
python中的sys模块和os模块
2022/03/20 Python