这是我参与「第四届青训营」笔记创作活动的的第 13 天

使用 TypeScript 可以让我们的代码变得更加安全，同时 IDE 也更容易能给出类型提示与语法提示，提升开发体验与开发效率。那么要怎么在 Express 中整合 TypeScript 呢？

安装依赖

想法是通过 nodemon 监控文件变化，然后通过 ts-node 来直接执行 .ts 文件。

下面安装依赖：

pnpm add -D typescript ts-node nodemon @types/express @types/node
pnpm add express

安装的两个 @types 开头的包是用于提供关于 express 和 nodejs 本身的一些 api 的类型提示的。

配置项目

安装完依赖之后就是配置项目，首先是 tsconfig.json 文件。可以使用自己的模板也可以使用 tsc --init ，根据自己喜好即可。

不重要的选项已经略去。

{
	"compilerOptions": {
		"rootDir": "./",
		"outDir": "./build"
	},
	"include": ["**/*.ts", "**/*.d.ts"]
}

然后就是在 package.json 中配置运行脚本：（同样略去了不重要的选项）

{
	"type": "module",
	"scripts": {
		"dev": "nodemon -e ts -w ./ -x pnpm run tsdev",
		"tsdev": "ts-node --esm main.ts"
	},
	"dependencies": {
		"express": "^4.18.1"
	},
	"devDependencies": {
		"@types/express": "^4.17.13",
		"@types/node": "^18.6.3",
		"nodemon": "^2.0.19",
		"ts-node": "^10.9.1",
		"typescript": "^4.5.4"
	}
}

这里的 tsdev 脚本是通过 ts-node 运行一次 main.ts 。

dev 脚本是通过 nodemon 监听 ts 文件变化，如果有变化的话，重新执行 tsdev 脚本，也就是重新运行 main.ts 。

---

到这里就配置完成了，愉快地在 main.ts 中使用 TypeScript 吧！

坑

当然你也可能不愉快，因为有几个坑：

无法识别 ts 文件

在运行 ts-node 的时候，一定要加 --esm 参数，告诉 ts-node 你要使用的是 esm，这样才能够识别 ts 文件。

无法 import 本地 ts 文件

不论是在 esm 还是 commonjs 中，在引入本地的其他文件时，都有以下几种方式：

• import/require 到父目录，会自动寻找目录下的 index.js 文件
• import/require 到文件名，会自动补上 .js 后缀
• import/require 精确到文件名以及后缀

但是不知道为什么在 ts-node 中，只能使用第三种方式，另外两种方式都会导致找不到模块。这个坑可害死人了，debug 大半天都试不出来， ts-node 的仓库里也没有提到这种解法。