在Node的Express库中使用Typescript开发基于V8引擎的NodeJS是JavaScript服务端的运行时

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

创建项目

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

npx express-generator express-typescript --no-view

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

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

支持TypeScript

安装依赖

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

npm install

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

npm install --save-dev typescript @types/node @types/express

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

接着，就安装编译typescript文件的依赖，这里主要用到nodemon和ts-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成功后如下图所示：

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

编译代码

当需要编译并生成项目的话，就比较简单了，通过在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开发了:)

在Node的Express库中使用Typescript开发

相关简介

创建项目

支持TypeScript

安装依赖

配置文件

编译代码