配置TS-node-的开发环境

jiezi

5 年前

直接配置 ts 的开发环境还是挺麻烦的，这里我总结了一套开发模板，可以在用的时候可以考虑直接 clone 这个项目，
项目地址 https://github.com/fish-node/…
以这个项目为基础模板来开发就行。

$ tree
.
├── README.md
├── jest.config.js
├── package.json
├── src
│   ├── index.ts
│   ├── math.ts
│   └── server.ts
├── test
│   ├── math.test.ts
│   └── server.test.ts
├── tsconfig.json
└── tslint.json

因为 ts 是建立在 js 的基础之上的，但是 node 又不能直接运行 ts 代码，实际使用是往往需要使用 tsc 将 ts 代码编译成 js 代码，这无疑是很麻烦的。

而 ts-node 则包装了 node，它可以直接的运行 ts 代码，使用起来很方便，它的官方仓库在这里 https://github.com/TypeStrong… , 基本用法请自行查看它的 readme。

我这里就是把 ts-node 写到 package.json，大家在 npm install 之后，就可以通过

$ npx ts-node src/index.ts

这种方式来运行 ts 代码，很方便。

然后我们知道 node 中有个 nodemon，可以在开发时自动的重启我们的 node 程序，而在 ts-node 中，对应的就是 ts-node-dev

$ npx ts-node-dev src/index.ts

在 src 目录下，我写了三个基本的 ts 代码

math.ts 就是最基本的 ts 的用法
然后 server.js 展示了如何使用 ts 编写一个 http 服务器
index.ts 则展示了 ts 中的模块化的使用

然后我使用 Jest 作为测试框架，在 test 目录下展示了用 Jest + Ts 编写我们的测试程序。
运行测试文件的话，可以使用

$ npm run test

@types/node @types/jest 是 ts 中类型声明文件，它可以给 js 编写的模块赋予类型系统，让我们享受类型系统的好处。

.editorconfig 是我们配置 IDE 的阅读配置文件
tslint.json 使我们的代码检查配置文件
这个文件主要是继承了官方推荐的代码风格。不过为了调试方便，把 ’no-console’ 这个条件设置为 false 了

然后重点是我们的 ts 配置文件。

一般来说，json 文件是不支持注释的，但是 ts 官方为了方便，对这个文件单独做了加强，使得我们可以使用注释，注释语法和 js 中的一样。

{
    "compilerOptions": {
        "target": "es2018",
        "module": "commonjs",
        "outDir": "./dist/",
        "rootDir": "./src/",
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "experimentalDecorators": true
    },
    "exclude": ["./test"]
}

其中的 target 就是编译后 js 代码的版本，因为我们是 node 环境，没必要考虑浏览器的兼容问题，所以大家还是尽量的使用更新的版本吧。

而 module 选项则是我们的模块管理机制，因为我们的 ts-node 目前还不指出 es 的模块管理机制，参考这个问题 https://github.com/TypeStrong…，所以我们还是继续使用 commonjs 规范。

然后 rootDir 就是我们的源代码目录，outDir 就是我们的编译后代码的目录。同时我们设置了 exclude 这个选项，把我们的测试文件排除在外。

ts-node

示例代码

测试框架

@types

配置文件

tsconfig.json