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

news2024/11/18 13:43:48

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.coloradmin.cn/o/2178537.html

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

相关文章

怎么用gitee做一个图片仓库,在md文档中用这个图片网络地址,然后显示图片

痛因:我为什么要这样做,呃,我一开始图片都是存本地地址的,放在和这个md文档同级的assets文件夹下面,这样子确实当时很方便,复制粘贴什么也不用管,但是想把这个文档分享给别的人的时候&#xff0…

Windows打开HDF5图像:HDFView软件的下载、安装

本文介绍在Windows电脑中,下载、安装用以查看HDF5图像数据的软件HDFView的方法。 HDF5(Hierarchical Data Format 5)是一种用于存储和管理大量科学数据的文件格式,其由HDF Group开发和维护,广泛应用于科学计算、工程、…

ESP8266wifi模块的使用

文章目录 概要整体架构流程技术名词解释具体配置过程小结 概要 本文旨在介绍ESP8266,做为客户端 电脑做为服务端,通过TCP/IP协议在同一个局域网下通过WiFi进行数据交互 设备选用 esp8266 软件选择 安信可串口调试助手 网络调试助手 (若没有软件可私…

OpenCV threhold()函数

OpenCV threhold()函数的主要用途是将灰度图转换为二值图像,实现灰度图的二值化,在机器视觉中使用频度较高,如尺寸量测,物体识别等。其原型如下: 函数参数: src 输入数组(多通道、8 位或 32 位浮点&#xf…

SpringBoot3脚手架

MySpringBootAPI SpringBoot3脚手架&#xff0c;基于SpringBoot3DruidPgSQLMyBatisPlus13FastJSON2Lombok&#xff0c;启动web容器为Undertow(非默认tomcat)&#xff0c;其他的请自行添加和配置。 <java.version>17</java.version> <springboot.version>3.3…

项目集成SpringSecurity框架

目录 项目没集成SpringSecurity框架的实现 项目之前的登录接口 LoginReqVo 接收前端的数据类型 LoginRespVo返回给前端的数据 项目集成SpringSecurity 第一步:导入依赖 第二步:创建security包结构 第三步&#xff1a;实现认证过滤器 第一步&#xff1a;自定义认证过滤器…

Modbus调试工具和源码分享

我们应该知道了学习Modbus协议应该具备主从两个设备才行&#xff0c;但是在学习过程中如果没有真实的物理设备&#xff0c;应该怎么调试呢&#xff1f; 我们可以通过软件工具来模拟主从设备&#xff0c;下面我们推荐几个比较实用的工具。 以下内容包含&#xff1a;实用工具、…

超好用的10款视频剪辑软件,从入门到精通

视频剪辑软件哪款比较好呢&#xff1f;无论是专业制作团队、自媒体创作者&#xff0c;还是家庭用户&#xff0c;一款好用的视频剪辑软件都能极大地提升创作效率和作品质量。以下是十款备受推崇的视频剪辑软件&#xff0c;分别从适用人群、易用程度和功能特点进行介绍。 1.影忆…

揭秘移动硬盘RAW:原因、恢复策略与预防措施

移动硬盘RAW概述 移动硬盘&#xff0c;作为现代数据存储的重要工具&#xff0c;其稳定性与数据安全直接关乎用户的数据资产安全。然而&#xff0c;在使用过程中&#xff0c;不少用户会遇到移动硬盘状态突然变为RAW格式的情况&#xff0c;这往往伴随着数据无法直接访问的困扰。…

1688客服代码怎么做生成悬浮客服代码阿里巴巴国内站1688平台悬浮特效悬浮代码悬浮客服 1688客服代码怎么做生成器软件代码工具制作客服代码阿里巴巴

阿里巴巴国内站1688平台悬浮特效悬浮代码悬浮客服 1688客服代码怎么做生成器软件代码工具制作客服代码阿里巴巴 一秒美工工具

王道-操作系统

3 下列说法正确的是_____ 答案:A 解析: A 正确。如链接文件可以顺序存取,但不能随机存取。连续文件可随机存取,也可顺序存取。 B 错误。一个 FCB 就是一个文件目录项。在引入索引节点后,每个文件的目录项只保留文件名和指向该文件对应的索引节点指针,而索引节点的有关信息…

一书直接讲透自然语言处理《Getting Started with Google BERT_ Build and train》

《Getting Started with Google BERT: Build and Train》是一本面向初学者和中级读者的指南&#xff0c;旨在帮助他们理解和使用Google的BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;模型。BERT是近年来自然语言处理&#xff08;NLP&…

WIFI密码默认显示

文章目录 需求分析遇到问题问题原因解决方案 需求 在进入设置&#xff0c;点击某一个wifi,连接wifi 界面&#xff0c;显示密码默认选中状态&#xff0c;效果如下 分析 在 WiFi密码被输入法挡住 中我们已经分析了整个流程&#xff0c;布局文件和控制中心。 结局系统设置WIFI连…

9.29总结

这星期学了概率和组合数学 这是我觉得的一个有趣的题目&#xff0c;每个人身上都有n-1根绳子&#xff0c;如果组不成稳定三角&#xff0c;那么肯定有两个人相邻两根绳子颜色不一样&#xff0c;那么每两个这样的人就会贡献一个不稳定三角形&#xff0c;所以只要所有三角形减去每…

Linux 进程间通信(共享内存+消息队列)

目录 一.共享内存 1.底层原理和系统接口 a.底层原理 b.系统接口 ① shmget ② shmat ③ shmdt ④ shmctl c.命令行控制指令 2.共享内存的通信特点 a.共享内存间的通信没有任何的同步机制 b.共享内存是所有进程间通信速度最快的 c.共享内存可以提供较大的空间。 3…

网络游戏通信方案概述

弱联网和强联网游戏 长连接和短连接游戏 Socket、Http、FTP 总结

亚马逊AI编程工具Amazon Q 和 Amazon CodeWhisperer使用教程

Amazon CodeWhisperer 主要功能&#xff1a;用于代码生成和编程辅助。它可以在 IDE 中提供代码建议、自动补全代码、生成代码片段等。使用场景&#xff1a;主要用于开发者在编写代码时提高效率&#xff0c;减少重复性工作。特点&#xff1a;支持多种编程语言&#xff0c;集成在…

composer环境变量(phpstudy集成环境)无法使用问题

composer 不是内部或外部命令,也不是可运行的程序 或批处理文件。 按下WinR组合键打开“运行”&#xff0c;输入sysdm.cpl 回车&#xff0c;打开“系统属性”并切换至“高级”选项卡&#xff0c;点击“环境变量”进行配置 配置完后点击确定&#xff0c;重新打开命令行&#x…

leetcode:LCR 169. 招式拆解 II(python3解法)

难度&#xff1a;简单 某套连招动作记作仅由小写字母组成的序列 arr&#xff0c;其中 arr[i] 第 i 个招式的名字。请返回第一个只出现一次的招式名称&#xff0c;如不存在请返回空格。 示例 1&#xff1a; 输入&#xff1a;arr "abbccdeff" 输出&#xff1a;a示例 2…

mac Wireshark You do not have permission to capture on device “rvio“.

原因&#xff1a; 权限不足 解决方案&#xff1a; 打开终端在终端输入 whoamin (会在终端显示本机的实际用户名字) 例如&#xff1a;xiaoming进入 /dev 目录 cd /dev输入命令&#xff1a;ls -la | grep bp输入命令&#xff1a;sudo chown whoamin xiaoming:admin bp*重新打开 …