DDR爱好者之家

使用TS来编写express服务器的方法步骤
站长资源 2024/12/24 佚名
69 1538
DDR爱好者之家 Design By 杰米

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"htmlcode">



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服务器内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米