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"