如何在Node.js和Express中设置TypeScript(2023年)
在这篇文章中,我们将介绍在Express应用程序中设置TypeScript的最佳方法,了解与之相关的基本限制。
文章目录
创建初始文件夹和package.json
shell
mkdir node-express-typescript
cd node-express-typescript
npm init --yes
在初始化package.json文件之后,新创建的文件可能会像下面的代码一样:
json
{
"name": "Your File Name",
"version": "1.0.0",
"description": "",
"main": "index.ts", // 将入口点从js更改为.ts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"type": "module",
"keywords": [],
"author": "",
"license": "ISC"
}
安装TypeScript和其他依赖项
sh
npm install express mongoose cors mongodb dotenv
sh
npm install -D typescript ts-node-dev @types/express @types/cors
生成tsconfig.json文件
bash
npx tsc --init
上述命令将生成一个名为tsconfig.json的新文件,其中包含以下默认的编译器选项:
bash
target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true
-
在打开tsconfig.json文件后,您会看到许多其他被注释掉的编译器选项。在tsconfig.json中,compilerOptions是一个必填字段,需要指定。
- 将rootDir和outDir设置为src和dist文件夹
json
{
"compilerOptions": {
"outDir": "./dist"
// other options remain same
}
}
使用.ts扩展名创建一个Express服务器
创建一个名为index.ts的文件并打开它
typescript
import express, { Express, Request, Response , Application } from 'express';
import dotenv from 'dotenv';
//For env File
dotenv.config();
const app: Application = express();
const port = process.env.PORT || 8000;
app.get('/', (req: Request, res: Response) => {
res.send('Welcome to Express & TypeScript Server');
});
app.listen(port, () => {
console.log(`Server is Fire at http://localhost:${port}`);
});
监听文件更改并构建目录
bash
npm install nodemon
安装这些开发依赖项后,更新package.json文件中的脚本:
bash
{
"scripts": {
"build": "npx tsc",
"start": "node dist/index.js",
"dev": "nodemon index.ts"
}
}
运行代码
bash
npm run dev
如果一切正常,您将在控制台中看到以下消息:
Server is Fire at http://localhost:8000