使用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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 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 cookie 登录验证示例代码
2009/03/16 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
python设置环境变量的作用和实例
2019/07/09 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
医院门卫岗位职责
2013/12/30 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
元旦寄语大全
2014/04/10 职场文书
煤矿安全生产标语
2014/06/06 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
2014年工程师工作总结
2014/11/25 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
2015年外联部工作总结
2015/04/03 职场文书
劳动仲裁调解书
2015/05/20 职场文书
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript