Node.js安装Express,Node.js支持Typescript以及Express支持Typescript的步骤

1. Node.js 安装Express

    运行如下命令:

$ mkdir express-demo
$ cd express-demo$ npm install express 
$ npm install body-parser //(可选)中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据
$ npm install cookie-parser //(可选)通过req.cookies可以取到传过来的cookie,并把它们转成对象
$ npm install multer //(可选)中间件,用于处理 enctype="multipart/form-data"(设置表单的MIME编码)的表单数据
$ npm list express

创建一个server.js

var express = require('express');
var app = express();app.listen(8081, function () {console.log("server is running on port 8081")
})

运行:

$ C:\Users\MyStudy\express-demo> node server.js
server is running on port 8081  //输出结果,浏览器访问http://localhost:8081

2. Node.js 支持Typescript

   运行如下命令:

$ mkdir tsc-node-demo
$ cd tsc-node-demo$ npm init -y //初始化,创建package.json$ npm install typescript --save-dev    //安装typescipt
$ npm install @types/node --save-dev   //是一个用于 TypeScript 的类型定义包,包含了 Node.js 的类型定义。这些类型定义允许 TypeScript 更好地理解 Node.js 的 API,从而提供类型检查和智能提示等功能$ npx tsc --init //创建tsconfig.json

创建ts文件

const greeting: string = 'Hello, TypeScript with Node.js!';
console.log(greeting);

运行:

$ tsc index.ts  //如果报错:tsc : 无法加载文件 \AppData\Roaming\npm\tsc.ps1,因为在此系统上禁止运行脚本,请使用Git Bash
$ node index.js
Hello, TypeScript with Node.js! //输出结果

另外,还可以修改为使用npm运行

打开package.json,找到"scripts"(没有就新建),修改或者添加build,start命令,如下:

"scripts": {"build": "tsc","start": "node index.js"}

然后就可以通过下面命令运行:

$ npm run build
$ npm start

3. Express支持Typescript

   依次运行如下命令:

$ mkdir tsc-express-demo
$ cd tsc-express-demo$ npm init -y
$ npm install express
$ npm install typescript @types/express @types/node --save-dev$ npx tsc --init

打开tsconfig.json,修改/添加,但不局限于以下配置 (根据你实际项目来):

{"compilerOptions": {"esModuleInterop": true,"target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */"module": "commonjs",                                /* Specify what module code is generated. */"outDir": "./dist",                                   /* Specify an output folder for all emitted files. */"strict": true,                                      /* Enable all strict type-checking options. */"skipLibCheck": true                                 /* Skip type checking all .d.ts files. */},"include": ["src/**/*"],"exclude": ["node_modules", "**/__tests__"]
}

新建 src/index.ts (因为我们在tsconfig.json里配置的路径是 src/**/*)

import express, { Request, Response } from 'express';const app = express();
const port = 3000;app.get("/", (req: Request, res: Response) => {res.send("Hello, TypeScript with Express!");
});app.listen(port, () => {console.log("server is running on port " + port);
});

运行:

$ npx tsc
$ node dist/index.js
server is running on port 3000 //输出结果.浏览器用http://localhost:3000访问

另外,还可以修改为使用npm运行

打开package.json,修改或添加"scripts"

 "scripts": {"build": "tsc","start": "node dist/index.js","dev": "ts-node src/index.ts"}

 然后就可以通过下面命令运行:

//启动dev开发环境,不需要生成js文件
$ npm run dev
//或者
//生成js文件,可以用于发布
$ npm run build //生成js文件
$ npm start

如果我们想自动监视项目中的应用程序文件的更改,并在更改时自动重启服务器,可以安装nodemon

npm install nodemon --save-dev

打开package.json,修改start,dev命令,以整合typescript和nodemon:

 "scripts": {"build": "tsc","start": "nodemon dist/index.js","dev": "nodemon --exec ts-node src/index.ts"},

还可以创建一个nodemon.json 配置文件来定义nodemon 的行为。例如:

{"watch": ["src"], //监视 src 文件夹的更改"ext": "ts,js",   //关注文件扩展名为 .ts 和 .js 的文件"exec": "ts-node src/index.ts" //使用 ts-node 来执行 .ts 文件
}

运行命令不变,会输出如下内容:

[nodemon] 3.1.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node dist/index.js`
server is running on port 3000

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1550448.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

如何使用ssm实现大学生校园招聘网的设计与实现

TOC ssm738大学生校园招聘网的设计与实现jsp 第1章 绪论 1.1 课题背景 二十一世纪互联网的出现,改变了几千年以来人们的生活,不仅仅是生活物资的丰富,还有精神层次的丰富。在互联网诞生之前,地域位置往往是人们思想上不可跨域…

网页WebRTC电话和软电话哪个好用?

关于WebRTC电话与软件电话哪个更好用,这实际上取决于多个因素,并没有一个绝对的答案。不过,我可以根据WebRTC技术的一些特点,以及与传统软件电话相比的优劣势,为你提供一个清晰的对比。 首先,让我们了解一下…

单细胞miloR分析(基于 KNN 图的细胞差异丰度分析方法)

通常情况下,对两组或多组样本进行了不同处理/干预之后,研究者首先会进行同种细胞亚群处理前后的细胞数量的比较,但在单细胞分辨率时代之后,即使是同一个亚群中的不同细胞也应当看成不同的样本。 那么问题就来了,既然应…

算法:按既定顺序创建目标数组

力扣1389 提示&#xff1a; 1 < nums.length, index.length < 100nums.length index.length0 < nums[i] < 1000 < index[i] < i 题解&#xff1a; class Solution {public int[] createTargetArray(int[] nums, int[] index) {int[] target new int[num…

SD2.0 Specification之CRC(Cyclic Redundancy Code)

文章目录 本文章主要讲解关于SD2.0中的CRC应用&#xff0c;其它基础概念和其它内容请参考以下文章。 SD2.0 Specification简述 CRC全称为Cyclic Redundancy Code&#xff0c;中文名称是循环冗余校验&#xff0c;该方法通过附加冗余数据来保证数据的完整性&#xff0c;即用于检…

RabbitMQ的高级特性-限流

消息分发: RabbitMQ队列拥有多个消费者时, 队列会把收到的消息分派给不同的消费者. 每条消息只会发送给订阅列表⾥的⼀个消费者. 这种⽅式⾮常适合扩展, 如果现在负载加重,那么只需要创建更多的消费者来消费处理消息即可. 默认情况下, RabbitMQ是以轮询的⽅法进⾏分发的, ⽽不管…

BetterAndBetter--Mac上强大的手势操控软件,让你的Mac更加得心应手

很多新人在开始使用Mac的时候&#xff0c;很难脱离鼠标操作&#xff0c;但是Mac的触摸板可以说是Mac的一大特色&#xff0c;能够完成非常多的操作&#xff0c;甚至在有些时候比鼠标更加的好用&#xff0c;那么新手该如何使用触摸板呢&#xff0c;BetterAndBetter可以帮助新手快…

Alternative Reconciliation Accounts 备选统驭科目

业务场景&#xff1a; #1 海外项目对于应付账款&#xff0c;超过1年期的需要转入到其他科目&#xff1b; #2. 通过备选统驭科目进行 从应付账款&#xff0c;到应付账款-长期的结转 备选统驭科目的使用与配置 备选统驭科目&#xff08;AlternativeReconciliation Accounts)就…

Dynamics 365 dependency EntityType

导解决方案时经常会碰到组件依赖导致导入报错&#xff0c;而错误提示中组件只有type, 比如下图中的type 20和60, 初看之下并不知道是什么意思&#xff0c;从parentDisplayName能看出来&#xff0c;这个parent是个实体&#xff0c;但实体中的什么呢&#xff0c;目测是看不出来的…

怎样用python+sqlalchemy获得mssql视图对应物理表关系(二)

话不多说 目标:为了实现低代码数据视图对接,有必要得到视图所对应物理表及字段名称,字段类型等 1)约束:视图中用到的物理表不能起别名,所以修改上一篇中存储过程建立语句 USE [agui_conn] GO /****** Object: StoredProcedure [dbo].[sp_GetOrdersByTimestamp] Script D…

生信机器学习入门4 - 构建决策树(Decision Tree)和随机森林(Random Forest)分类器

机器学习文章回顾 生信机器学习入门1 - 数据预处理与线性回归&#xff08;Linear regression&#xff09;预测 生信机器学习入门2 - 机器学习基本概念 生信机器学习入门3 - Scikit-Learn训练机器学习分类感知器 生信机器学习入门4 - scikit-learn训练逻辑回归&#xff08;L…

第五周做题总结_数据结构_队列与应用

id:43 A. DS队列之银行排队 题目描述 银行营业大厅共服务3种客户&#xff0c;类型为A\B\C&#xff0c;大厅分别设置了3个窗口分别服务三种客户&#xff0c;即每个窗口只服务一种客户。现有一批客户来银行办理业务&#xff0c;每个客户都有类型和办理业务时间。每个窗口按照客…

Servlet详细讲解(一篇就够)

目录 一、Servlet 1.1 Servlet介绍 1.2 HTTP 1.2.1 在http请求中有请求报文 1.2.2 在http响应中有响应报文 1.3 GET和POST 1.3.1 GET 1.3.2 POST 二、第一个Servlet程序[重点] 2.1 创建web项目 2.2 pom依赖 2.3 编写Servlet 2.4 配置Servlet 2.5 部署项目 2.6 启…

C++进阶知识2 多态

多态 1. 多态的概念2. 多态的定义及实现2.1 多态的构成条件2.1.2 虚函数2.1.3 虚函数的重写/覆盖2.1.5 虚函数重写的⼀些其他问题2.1.6 override和final关键字2.1.7 重载/重写/隐藏的对⽐ 3. 多态的原理3.2 多态的原理3.2.1 多态是如何实现的3.2.2 动态绑定与静态绑定3.2.3 虚函…

PL/SOL 连接提示 Initialization error 解决方法

问题 测试连接数据库报错&#xff0c;提示如下 解决方法 1、OCI 库输入的时候&#xff0c;路径两遍有" " 2、Instant Client 和 PL/SOL Developer 位数版本不一致 要么都是x64位&#xff0c;要么都是x86位&#xff08;32位&#xff09;&#xff0c;以下为下载链接…

算力运力解决方案:构建未来智算新生态

中国联通国际有限公司产品之算力运力解决方案&#xff1a;构建未来智算新生态 在当今这个数据爆炸、技术日新月异的时代&#xff0c;算力已成为推动社会进步和产业升级的关键力量。中国联通国际有限公司紧跟时代步伐&#xff0c;依托其强大的网络资源和深厚的技术积累&#xf…

63.5 注意力提示_by《李沐:动手学深度学习v2》pytorch版

系列文章目录 文章目录 系列文章目录注意力提示生物学中的注意力提示查询、键和值注意力的可视化使用 show_heatmaps 显示注意力权重代码示例 代码解析结果 小结练习 注意力提示 &#x1f3f7;sec_attention-cues 感谢读者对本书的关注&#xff0c;因为读者的注意力是一种稀缺…

此连接非私人连接

当你手机浏览器输入网站打开提示“此连接非私人连接&#xff0c;此网站可能在冒充来窃取你的个人或财务信息。你应回到之前的页面”这是因为该网站的SSL数字证书到期导致&#xff0c;需要此网站的管理员重新申请数字证书替换之前的文件才可以实现。 注意&#xff1a;如果你不是…

java 洛谷题单【数据结构1-1】线性表

P3156 【深基15.例1】询问学号 解题思路 很简单的一道题&#xff0c;但是由于n、m的数据很大&#xff0c;要用Java的I/O流读入和输出。 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.StreamTokenizer; impo…

二维数组的存放

今天我水的文章是二维数组的存放 二维数组的存放方式其实和一维数组没有区别&#xff0c;但如果想要更直观的了解&#xff0c;我们可以把它们的地址打印出来。 代码如下&#xff1a; #include <stdio.h> int main() {int arr[3][3];//二维数组&#xff0c;int数组类型…