Express是nodejs开发中普遍使用的一个框架,下面要谈的是如何结合Typescript去使用。
目标
我们的目标是能够使用Typescript快速开发我们的应用程序,而最终我们的应用程序却是编译为原始的JavaScript代码,以由nodejs运行时来执行。
初始化设置
首要的是我们要创建一个目录名为express-typescript-app
来存放我们的项目代码:
mkdir express-typescript-app cd express-typescript-app
为了实现我们的目标,首先我们需要区分哪些是线上程序依赖项,哪些是开发依赖项,这样可以确保最终编译的代码都是有用的。
在这个教程中,将使用yarn命令作为程序包管理器,当然npm也是一样可以的。
生产环境依赖
express
作为程序的主体框架,在生产环境中是必不可少的,需要安装
yarn add express
这样当前目录下就生成了一个package.json 文件,里面暂时只有一个依赖
开发环境依赖项
在开发环境中我们将要使用Typescript编写代码。所以我们需要安装typescript
。另外也需要安装node和express的类型声明。安装的时候带上- D
参数来确保它是开发依赖。
yarn add -D typescript @types/express @types/node
安装好之后,还有一点值得注意,我们并不想每次代码更改之后还需要手动去执行编译才生效。这样体验太不好了!所以我们需要额外添加几个依赖:
- ts-node: 这个安装包是为了不用编译直接运行typescript代码,这个对本地开发太有必要了
- nodemon:这个安装包在程序代码变更之后自动监听然后重启开发服务。搭配
ts-node
模块就可以做到编写代码及时生效。
因此这两个依赖都是在开发的时候需要的,而不需编译进生产环境的。
yarn add -D ts-node nodemon
配置我们的程序运行起来
配置Typescript文件
为我们将要用的typescript设置配置文件,创建tsconfig.json
文件
touch tsconfig.json
现在让我们给配置文件添加编译相关的配置参数:
module: "commonjs"
— 如果使用过node的都知道,这个作为编译代码时将被编译到最终代码是必不可少的。esModuleInterop: true
— 这个选项允许我们默认导出的时候使用*代替导出的内容。target: "es6"
— 不同于前端代码,我们需要控制运行环境,得确保使用的node版本能正确识别ES6语法。rootDir: "./"
— 设置代码的根目录为当前目录。outDir: "./build"
— 最终将Typescript代码编译成执行的Javascript代码目录。strict: true
— 允许严格类型检查。
最终tsconfig.json
文件内容如下:
{ "compilerOptions": { "module": "commonjs", "esModuleInterop": true, "target": "es6", "rootDir": "./", "outDir": "./build", "strict": true } }
配置package.json脚本
目前还没有 package.json
文件的scripts项,我们需要添加几个脚本:第一个是start
启动开发模式,另一个是 build
打包线上环境代码的命令。
启动开发模式我们需要执行nodemon index.ts
,而打包生产代码,我们已经在tsconfig.json
中给出了所有需要的信息,所以我们只需要执行tsc
命令。
此刻下面是你package.json文件中所有的内容,也可能由于我们创建项目的时间不一样,导致依赖的版本号不一样。
{ "dependencies": { "express": "^4.17.1" }, "devDependencies": { "@types/express": "^4.17.11", "@types/node": "^14.14.22", "nodemon": "^2.0.7", "ts-node": "^9.1.1", "typescript": "^4.1.3" } }
Git配置
如果使用git来管理代码,还需要添加.gitignore
文件来忽视node_modules
目录和build
目录
touch .gitignore
添加忽视的内容
node_modules build
至此,所有的安装过程已经结束,比单纯的无Typescript版本可能稍微复杂点。