当前位置: 首页 > article >正文

如何在Node.js和Express中设置TypeScript(2023年)

如何在Node.js和Express中设置TypeScript(2023年)

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

文章目录

  • 如何在Node.js和Express中设置TypeScript(2023年)
    • 创建初始文件夹和package.json
    • 安装TypeScript和其他依赖项
    • 生成tsconfig.json文件
    • 使用.ts扩展名创建一个Express服务器
    • 监听文件更改并构建目录
    • 运行代码

创建初始文件夹和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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传


http://www.kler.cn/a/145261.html

相关文章:

  • 【2023传智杯】第六届传智杯程序设计挑战赛AB组-DEF题解题分析详解【JavaPythonC++解题笔记】
  • 【机器学习】算法性能评估常用指标总结
  • NVMe-oF E-JBOF设计解析:WD RapidFlex网卡、OpenFlex Data24
  • 数据结构 / 计算机内存分配
  • 力扣labuladong——一刷day53
  • canvas扩展001:利用fabric绘制图形,可以平移,旋转,放缩
  • C语言基础介绍
  • flink源码分析之功能组件(二)-kubeclient
  • TPLink-Wr702N 通过OpenWrt系统打造打印服务器实现无线打印
  • Pure-Pursuit 跟踪五次多项式轨迹
  • mysql1124实验七索引管理
  • xilinx FPGA multi boot之镜像切换
  • github timeout 问题解决 与访问加速
  • 从代码执行,看单片机内存的分配
  • Java中static、final、static final的区别
  • 第三节-Android10.0 Binder通信原理(三)-ServiceManager篇
  • MidJourney笔记(3)-Prompts
  • Linux加强篇005-用户身份与文件权限
  • 【ARM 嵌入式 编译系列 2.3 -- GCC 中指定 ARMv8-M 的 Thumb 指令集参数详细介绍】
  • 【cppcheck 静态代码分析工具使用教程】