express搭建ts(TypeScript)运行环境

要在使用 TypeScript 的环境下运行一个简单的 Express 应用,可以使用 ts-node 直接运行 TypeScript 文件,而无需先将其编译为 JavaScript。以下是一个简单的示例,展示了如何设置和运行一个基本的 Express 应用。

步骤

1. 初始化项目

首先,初始化一个新的 Node.js 项目:

mkdir lmb-express
cd lmb-expres
npm init -y

2. 安装必要的依赖

安装 Express 和 TypeScript 以及类型定义:

npm install express
npm install --save-dev typescript @types/express @types/node ts-node

3. 创建 tsconfig.json

可以直接使用 tsc --init 生成,内容无需修改。
也可以在项目根目录下创建一个 tsconfig.json 文件,内容如下:

{"compilerOptions": {"target": "ES6","module": "commonjs","outDir": "./dist","rootDir": "./src","strict": true,"esModuleInterop": true,"skipLibCheck": true}
}

4. 创建项目结构

创建一个 src 目录,并在其中创建 index.ts 文件:

mkdir src
touch src/index.ts

5. 编写 index.ts

src/index.ts 文件中编写以下代码:

import express from 'express';const app = express();
const port = 3000;app.get('/', (req, res) => {res.send('Hello, TypeScript with Express!');
});app.listen(port, () => {console.log(`Server is running at http://localhost:${port}`);
});

6. 运行 TypeScript 文件

6.1、使用 ts-node 直接运行 index.ts 文件:

npx ts-node src/index.ts

你应该会看到控制台输出类似以下内容:

Server is running at http://localhost:3000

6.2、 通过 npm 脚本运行

为了简化运行过程,可以在 package.json 中添加一个脚本:

{"name": "node_demo","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start":"ts-node src/index.ts"},"keywords": [],"author": "","license": "ISC","description": "","dependencies": {"express": "^4.21.1"},"devDependencies": {"@types/express": "^5.0.0","@types/node": "^22.8.6","ts-node": "^10.9.2","typescript": "^5.6.3"}
}

现在可以使用以下命令启动服务器:

npm start

7、测试服务器

打开浏览器或使用 curl 命令访问 http://localhost:3000,你应该会看到如下响应:

Hello, TypeScript with Express!

通过这些步骤,你已经成功创建并运行了一个简单的使用 TypeScript 编写的 Express 应用。这样做不仅提高了代码的可维护性和类型安全性,还能利用 TypeScript 的各种功能来改进开发体验。

8、热更新(可选)

对于使用 TypeScript 和 Express 的项目,可以使用 ts-node-dev 或 nodemon 等工具来实现热更新。使用 ts-node-dev 实现热更新。

8.1、使用 ts-node-dev

1)安装依赖

npm install --save-dev ts-node-dev

2)在package.json中配置ts-node-dev
修改我们前面配置的start值为如下内容即可。

/*"start":"ts-node src/index.ts"*/
"start": "ts-node-dev --respawn src/index.ts"

8.2、使用nodemon

1)安装依赖

npm install --save-dev nodemon

2)在package.json中配置ts-node-dev
方法1:
修改我们前面配置的start值为如下内容即可。

/*"start":"ts-node src/index.ts"*/
"start": "nodemon src/index.ts"

方法2:
除上上面的配置也可以在根目录下建立nodemon.json
下面的src 是ts文件所在目录,可以根据自己的实际需求进行修改。

{"watch": ["src"],"ext": "ts","exec": "ts-node ./src/index.ts"
}

修改package.json

/*"start":"ts-node ./index.ts"*/"start": "nodemon"

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

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

相关文章

C++和OpenGL实现3D游戏编程【连载17】——着色器进阶(附源码)

🔥C++和OpenGL实现3D游戏编程【目录】 1、本节要实现的内容 在前面着色器初步一节我们了解了着色器的一些初步知识,通过顶点着色器和片段着色器显示出了一个彩色的立方体。我们这节课就来了解一些在着色器中显示纹理等一系列实用操作,同时了解一些进阶的图像渲染技术,比如…

【缓存与加速技术实践】Web缓存代理与CDN内容分发网络

文章目录 Web缓存代理Nginx配置缓存代理详细说明 CDN内容分发网络CDN的作用CDN的工作原理CDN内容的获取方式解决缓存集中过期的问题 Web缓存代理 作用: 缓存之前访问过的静态网页资源,以便在再次访问时能够直接从缓存代理服务器获取,减少源…

C++ | Leetcode C++题解之第520题检测大写字母

题目: 题解: class Solution { public:bool detectCapitalUse(string word) {// 若第 1 个字母为小写,则需额外判断第 2 个字母是否为小写if (word.size() > 2 && islower(word[0]) && isupper(word[1])) {return false;…

教育技术革新:SpringBoot在线试题库系统开发

2 相关技术 2.1 Spring Boot框架简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。通过这种方式,Sprin…

React + Vite + TypeScript + React router项目搭建教程

一、创建项目 运行项目 二、目录结构 项目目录: ├─node_modules //第三方依赖 ├─public //静态资源(不参与打包) └─src├─assets //静态资源├─components //组件├─config //配置├─http //请求方法封装├─layout //页面…

Android笔记(三十一):FrameLayout遇到的坑

背景 当FrameLayout里面是match_parent的时候,如果FrameLayout是wrap_content,则里面的view也会被当作wrap_content处理 原因 FrameLayout内的measureChildWithMargins -> getChildMeasureSpec的子类的MeasureSpec确定规则由父类的MeasureSpec和子类的LayoutP…

爬虫学习3

防盗链 #1.拿到conyId #2.拿到videoStatus返回的json.->srURL #srcURL里面的内容进行整理 #下载视频import requestsurl "https://www.pearvideo.com/video_1797054" contId url.split("_")[1]videoStatusUrl f"https://www.pearvideo.com/vi…

字典学习python

字典中的健可以添加,删除,但是不可以修改,只可以改后面的值 修改 字典名称[] value 若不存在健,那就添加,否则修改 pop删除,根据key实现对键值对,返回值是对应的value popitem返回值是一整个键…

QT-C++ 西门子snap7通讯库接口

QT-C 西门子snap7通讯库接口 一、核心程序1.头文件2.源文件 二、下载连接 一、核心程序 1.头文件 #pragma once #include <QObject> #include <QMutex> #include <QThread> #include "ToolSnapGlobal.h" #include "snap7.h" /* 特别说…

【设计模式】结构型模式(一):适配器模式、装饰器模式

结构型模式&#xff08;一&#xff09;&#xff1a;适配器模式、装饰器模式 1.适配器模式&#xff08;Adapter&#xff09;2.装饰器模式&#xff08;Decorator&#xff09;2.1 主要特点2.2 组成部分2.3 示例代码2.3.1 Component 组件2.3.2 ConcreteComponent 具体组件2.3.3 Dec…

认识物联网

新一代信息技术 物联网 物物相连的互联网&#xff0c;即物联网&#xff0c;又称传感器常见的传感器 • 温度传感器 • 压力传感器 • 声音传感器 • 02 • */08521 物联网概念 • 通过射频识别&#xff0c;红外传感器&#xff0c;全球定位系统GPS&#xff0c;激光扫描…

iOS 再谈KVC、 KVO

故事背景&#xff1a;大厂面试&#xff0c;又问道了基本的kvc kvo的原理和使用&#xff0c;由于转了前端&#xff0c;除了个setter和getter&#xff0c;我全忘记了&#xff0c;其实还是没有理解记忆&#xff0c;下面再看一下kvc 和kvo ,总结一个让人通过理解而无法忘记的方法&a…

07.适配器模式设计思想

07.适配器模式设计思想 目录介绍 01.适配器模式基础 1.1 适配器模式由来1.2 适配器模式定义1.3 适配器模式场景1.4 适配器模式思考 02.适配器模式实现 2.1 罗列一个场景2.2 用例子理解适配器2.3 适配器基本实现2.4 如何选择适配器 03.适配器模式分析 3.1 类适配器案例3.2 对象…

C语言 | Leetcode 题解之第535题TinyURL的加密与解密

题目&#xff1a; 题解&#xff1a; typedef struct {int key;char *val;UT_hash_handle hh; } HashItem;HashItem *dataBase NULL;char* encode(char* longUrl) {srand(time(0));int key;HashItem * pEntry NULL;while (true) {key rand();pEntry NULL;HASH_FIND_INT(dat…

Linux:线程安全的单例模式

设计模式 设计模式听上去是个很高贵的名词&#xff0c;其实就是是一套 多数人知晓、被反复使用、经过分类编目的、代码设计经验的总结&#xff0c;简称&#xff1a;对于编程比较典的场景的解决方案 单例模式 单例模式就是其中一种设计模式&#xff0c;是设计模式里的创建型模…

基于qt vs下的视频播放

**在 VS 2022 和 Qt 环境下利用 FFmpeg 实现一个基础视频播放器&#xff0c;需要完成以下几个步骤&#xff1a; 准备工作&#xff1a; 下载并配置 FFmpeg。确保 FFmpeg 的库和头文件可供 VS 2022 项目使用。 配置 Qt 项目&#xff0c;并导入 FFmpeg 库。 项目结构&#xff1a…

Django ORM详解:事务与F、Q函数使用

事务 #事务 from django.db import transaction from django.db.models import F # 装饰器用法&#xff1a;transaction.atomic def viewfunc(request):# 这些代码会在一个事务中执行... # with用法 try:#开启事物之后只有在事物里面的代码都正确运行完成才会执行相应的操作wit…

【网络安全】揭示 Web 缓存污染与欺骗漏洞

未经许可,不得转载。 文章目录 前言污染与欺骗Web 缓存污染 DoS1、HTTP 头部超大 (HHO)2、HTTP 元字符 (HMC)3、HTTP 方法覆盖攻击 (HMO)4、未键入端口5、重定向 DoS6、未键入头部7、Host 头部大小写规范化8、路径规范化9、无效头部 CP-DoS10、HTTP 请求拆分Web 缓存污染与有害…

AI打造超写实虚拟人物:是科技奇迹还是伦理挑战?

内容概要 在这个科技飞速发展的时代&#xff0c;超写实虚拟人物仿佛从科幻小说中走进了我们的日常生活。它们以生动的形象和细腻的动作&#xff0c;不仅在影视、广告和游戏中吸引了无数目光&#xff0c;更让我们对AI技术的未来充满了期待和疑惑。这些数字化身在逼真的外貌下&a…

第三次RHCSA作业

1、配置网络&#xff1a;为网卡添加一个本网段IPV4地址&#xff0c;x.x.x.123 2、配置yum本地仓库&#xff0c;并完成traceroute命令的安装 yum库配置成功过后&#xff0c;显示这个报错&#xff0c;没能写完 3、用至少两种方法查看sshd服务的进程号 4、添加一块10G大小的磁盘&…