如何在Node.js和Express中设置TypeScript（2023年）

在这篇文章中，我们将介绍在Express应用程序中设置TypeScript的最佳方法，了解与之相关的基本限制。

创建初始文件夹和package.json

mkdir node-express-typescript
cd node-express-typescript
npm init --yes

在初始化package.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和其他依赖项

npm install express mongoose cors mongodb dotenv

npm install  -D typescript ts-node-dev @types/express @types/cors

生成tsconfig.json文件

npx tsc --init

上述命令将生成一个名为tsconfig.json的新文件，其中包含以下默认的编译器选项：

target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true

• 在打开tsconfig.json文件后，您会看到许多其他被注释掉的编译器选项。在tsconfig.json中，compilerOptions是一个必填字段，需要指定。

  • 将rootDir和outDir设置为src和dist文件夹

{"compilerOptions": {"outDir": "./dist"// other options remain same}
}

使用.ts扩展名创建一个Express服务器

创建一个名为index.ts的文件并打开它

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}`);
});

监听文件更改并构建目录

npm install  nodemon

安装这些开发依赖项后，更新package.json文件中的脚本：

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

运行代码

npm run dev 

如果一切正常，您将在控制台中看到以下消息：
Server is Fire at http://localhost:8000