使用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 相关文章推荐
JS继承--原型链继承和类式继承
Apr 08 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
Vue 打包体积优化方案小结
May 20 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 _autoload自动加载类与机制分析
2012/02/10 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
详解Python 函数如何重载?
2019/04/23 Python
python 杀死自身进程的实现方法
2019/07/01 Python
python3字符串操作总结
2019/07/24 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Django权限控制的使用
2021/01/07 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
办公室前台岗位职责
2014/01/04 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
大专生自我评价
2014/01/28 职场文书
2014公司年终工作总结
2014/12/19 职场文书
frg-100简单操作(设置)说明
2022/04/05 无线电
Spring 使用注解开发
2022/05/20 Java/Android