使用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 继承实例分析
Nov 04 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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/01 无线电
Php+SqlServer实现分页显示
2006/10/09 PHP
使用php来实现网络服务
2009/09/15 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
Vue组件的使用教程详解
2018/01/05 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
Python ljust rjust center输出
2008/09/06 Python
python文件操作整理汇总
2014/10/21 Python
17个Python小技巧分享
2015/01/23 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
中医专业职业生涯规划书范文
2014/01/04 职场文书
教师反邪教心得体会
2016/01/15 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
写好Python代码的几条重要技巧
2021/05/21 Python
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python