express 项目支持 typescript 实战

这篇具有很好参考价值的文章主要介绍了express 项目支持 typescript 实战。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先创建一个express项目

  • 初始化项目
mkdir myapp
cd myapp
npm init (都用默认值)
  • 添加依赖包
npm install express nodemon
  • 修改 package.json
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "start": "node src/index.js",
    "dev": "nodemon src/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "nodemon": "^3.0.3"
  }
}
  • 修改工程脚本 src/index.js
const express = require('express');

const app = express();

const port = process.env.PORT || 3000;

app.get("/", (req, res, next) => {
  res.send("Express Server");
});

app.listen(port, () => {
  console.log(`[server]: Server is running at http://localhost:${port}`);
});

基于javascript的express创建好了,可以启动“npm run dev”验证一下。

express + typescript 改造

  • 添加typescript使用的包
npm install -D typescript @types/express @types/node

npm install -D ts-node
  • 生成 tsconfig.json
npx tsc --init

命令运行后,会生成 tsconfig.json 文件,我们添加一下 “outDir”: “./dist”, 修改后内容如下:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}
  • 将 src/index.js 改名成 src/index.ts,内容改成typescript脚本
import express, { Express, Request, Response } from "express";

const app: Express = express();
const port = process.env.PORT || 3000;

app.get("/", (req: Request, res: Response) => {
  res.send("Express + TypeScript Server");
});

app.listen(port, () => {
  console.log(`[server]: Server is running at http://localhost:${port}`);
});
  • 修改 package.json 的 scripts,内容如下
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "build": "npx tsc",
    "start": "node dist/index.js",
    "dev": "nodemon src/index.ts"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "nodemon": "^3.0.3"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "@types/node": "^20.11.5",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3"
  }
}

到这里,express + typescript 的工程改造就完成了,可以使用 “npm run dev” 命令启动工程进行测试。文章来源地址https://www.toymoban.com/news/detail-821883.html

到了这里,关于express 项目支持 typescript 实战的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 新购服务器项目部署指南—— Express + Vue + Nginx+ pm2 Nodejs项目部署全流程

    书接上回:新购服务器开荒记录(服务器安装宝塔、Nginx、Java、Python、pip、Node、npm) 要部署Express项目,首先要保证服务器已经安装好了Node,可以输入: node --version 查看node的版本: 如果没有安装node,可以使用宝塔安装(推荐),进入软件商店,搜索node,选择node.js版本管理

    2024年02月02日
    浏览(45)
  • 【Docker】部署和运行青龙面板:一个支持python3、javaScript、shell、typescript 的定时任务管理面板

    青龙面板是一个支持python3、javaScript、shell、typescript 的定时任务管理面板。 拉取镜像 从 Docker Hub 上拉取最新的 “qinglong” 镜像。 启动容器 使用刚刚拉取的镜像来启动一个新的 Docker 容器。 这个命令中的各个组成部分的含义如下: docker run : 这是 Docker 的一个命令,用于创建

    2024年01月22日
    浏览(59)
  • Vue3项目中没有配置 TypeScript 支持,使用 TypeScript 语法

    1.安装 TypeScript:首先,需要在项目中安装 TypeScript。在终端中运行以下命令 2.创建 TypeScript 文件:在 Vue 3 项目中,可以创建一个以 .ts 后缀的文件,例如 MyComponent.ts。在这个文件中,可以使用 TypeScript 语法编写代码。 在上面的示例中,我们使用 defineComponent 函数来定义一个

    2024年02月15日
    浏览(37)
  • TypeScript的魔法:如何轻松提升JavaScript项目的稳定性

    JavaScript,作为Web开发的核心语言,因其灵活性和广泛的应用受到开发者的喜爱。然而,这种灵活性也带来了挑战,尤其是在大型项目中,代码的维护和错误的追踪变得越来越困难。 TypeScript,起初被许多开发者视为“带类型的JavaScript”,但实际上,它远不止于此。确实,Ty

    2024年02月10日
    浏览(46)
  • react项目运行卡在编译:您当前运行的TypeScript版本不受@TypeScript eslint/TypeScript estree的官方支持

    错误信息具体如下: 搜索了一下,是typescript版本的问题,提示我版本需要在3.3.0和4.5.0中间,我查看了package.json,显示版本为4.1.3,然后一直给我提示我的版本是4.9.5,全局搜索一下,发现package-lock.json文件中typescript版本是4.9.5,那么两个文件有什么区别呢,如下: 两个都是依

    2024年01月24日
    浏览(48)
  • 【Nodejs】Express模板使用

    安装Express脚手架有两种方式: 使用express-generator安装 使用命令行进入项目目录,依次执行: 可通过express -h查看命令行的指令含义 Usage: express [options] [dir] 创建了一个名为 myapp 的 Express 应用,并使用ejs模板引擎 进入app,并安装依赖 在Windows 下,使用以下命令启Express应用:

    2024年02月15日
    浏览(30)
  • 【Nodejs】Express基本使用

    Express 中文网 基于 Node.js 平台,快速、开放、极简的 web 开发框架。 Express的安装可直接使用npm包管理器上的项目,在安装npm之前可先安装淘宝镜像: npm install -g cnpm --registry=https://registry.npmmirror.com/ 这样我们使用cnpm的来代替npm,这使得下载速度提高很多;其次你需要在你项目

    2024年02月15日
    浏览(35)
  • nodejs篇 express(1)

    exp

    2023年04月10日
    浏览(31)
  • 二蛋赠书十一期:《TypeScript入门与区块链项目实战》

    大家好!我是二蛋,一个热爱技术、乐于分享的工程师。在过去的几年里,我一直通过各种渠道与大家分享技术知识和经验。我深知,每一位技术人员都对自己的技能提升和职业发展有着热切的期待。因此,我非常感激大家一直以来对我的关注和支持。 为了回馈大家的厚爱,

    2024年02月04日
    浏览(35)
  • Nodejs+express后端学习笔记(1)

    1、下载安装包:进入官网(https://nodejs.org/en),下载左侧的稳定版。 2、选择安装位置,不用勾选自动安装必要工具。 其他都默认Next。 配置环境,具体参考本文章: https://blog.csdn.net/WHF__/article/details/129362462 nodejs用来开发Web服务器(后端)。本文使用Visual Studio Code进行编写和

    2024年01月23日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包