在Node的Express库中使用Typescript开发

·  阅读 80
在Node的Express库中使用Typescript开发

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第12天,点击查看活动详情

相关简介

  • 前言 基于V8引擎的NodeJSJavaScript的服务端运行时,可以让JavaScript做到和其他服务端语言一样开发接口,其中最为出名的Web开发库之一就是Express,但是Express默认只是支持JavaScript开发,这里来分享使用TypeScript开发的方法。

  • 介绍

首先,Express库基于 Node.js 平台,快速、开放、极简的 Web 开发框架,通过官方提供的脚手架工具,可以很简单的创建出一个Express项目,下面就通过脚手架来创建项目并实现TypeScript的开发。

创建项目

通过官方提供的Express应用生成器可以直接生成项目,唉命令行编写如下命令:

npx express-generator express-typescript --no-view
复制代码

上面的--no-view代表不需要生成器生成视图文件(默认为jade),使用该命名将不会有视图目录产生,该命令会产生如下结果:

image.png

从图中可以看到默认是不会安装对应依赖的,需要进入目录执行npm install来手动安装。

支持TypeScript

安装依赖

创建好项目之后,就需要安装对应的依赖来使得项目能进行开发,首先安装默认的依赖:

npm install
复制代码

安装好默认的依赖之后,就需要安装支持typescript的依赖了,如下命令:

npm install --save-dev typescript @types/node @types/express
复制代码

以上依赖是typescript的支持和node还有express的声明文件,有了这三个依赖才方便node进行typescript的开发。

接着,就安装编译typescript文件的依赖,这里主要用到nodemonts-node两个库:

npm install --save-dev nodemon ts-node
复制代码

配置文件

安装好所有依赖之后,接着就需要进行文件的配置了,首先需要创建tsconfig.json文件:

npx tsc --init
复制代码

生成的配置文件默认配置如下,其中"outDir": "./dist"是新增的,代码如下:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "outDir": "./dist", // 这一行默认没有,新增的
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
  }
}
复制代码

生成tsconfig.json文件后,需要先把各个.js文件重命名为.ts文件,并且把commonjs的包引入方式改为esm的引入方式,例如:

// const app = require('./app') 改为下面的引入方式
import app from './app'
复制代码

然后进入到package.json文件中国,对scripts进行如下配置:

"scripts": {
  "dev": "nodemon --watch **/*.ts --exec \"ts-node\" index.ts"
}
复制代码

这里nodemon --watch **/*.ts --exec \"ts-node\" index.ts表示监听typescript文件,当有修改时通过ts-node来执行index.ts入口文件,执行npm run dev成功后如下图所示:

image.png

此时,当修改文件后,得益于nodemonts-node的加持,开启的服务会自动重新更新,这样开发过程中会更加的方便,如下图所示:

crx06.gif

编译代码

当需要编译并生成项目的话,就比较简单了,通过在package.json中的scripts新增如下配置:

"scripts": {
  "dev": "nodemon --watch **/*.ts --exec \"ts-node\" index.ts"
  "build": "npx tsc -p tsconfig.json"
}
复制代码

执行npm run build之后,在根目录中会生成一个dist目录(前面配置的),里面就是编译后的JavaScript代码。

至此,就已经能在Express中使用TypeScript开发了:)

分类:
后端
收藏成功!
已添加到「」, 点击更改