应用目录结构

虽然 Typescript 的目录多种多样，但是在统一的编码规范中，我们推荐常用的一种，这里就简单介绍我们常见的目录以及文件。

  1. ├── app
  2.    ├── README.md
  3.    ├── .gitignore
  4.    ├── package.json
  5.    ├── src
  6.    ├── dist
  7.    ├── test
  8.    ├── tsconfig.json
  9.    └── tslint.json

最常见的目录结构如下，我们一一来介绍。

ts 依赖

在介绍目录之前，我们先介绍应用需要安装的依赖，这些依赖已经作为默认内容在脚手架中提供。

  1. // in package.json
  2. "devDependencies": {
  3.   "@types/mocha": "^5.2.5",
  4.   "@types/node": "^10.5.5",
  5.   "ts-node": "^7.0.1",
  6.   "tslint": "^5.9.1",
  7.   "typescript": "^2.8.0"
  8. }

这里的依赖有两部分，@types/* 开头的定义文件和其他 ts 运行时需要的文件。

  • @types/node - Node.js 的定义包，有了它原生内置的模块就有了类型定义，@types/mocha 同理
  • typescript - 微软提供的 ts 核心包，提供了高阶的语法糖支持，同时也提供了 tsc 等编译器。
  • ts-node - 三方提供的运行环境，由于 js 运行无需编译，只需要 node index.js 即可运行，同理，可以用 ts-node index.ts 来直接运行 ts，方便开发

src 和 dist

由于 Typescript 是编译过程中进行类型检查，虽然在开发过程中可以通过类似 ts-node应用目录结构 - 图1 这样的模块来简化，但是最终应用部署前，还是需要打包编译的，midway 提供了 midway-bin build 命令进行编译，这一内容将在工具部分来提供。

src 目录存放 Typescript 源文件，Typescript 源文件由 *.ts 结尾，而编译后的文件为 *.js，在一般情况下，和源文件一一对应。

tsconfig.json 文件

这是 Typescript 的核心配置文件，一般在应用根目录，里面的配置项一般是都是指定编译环境。

比如：

  1. {
  2.   "compilerOptions": {
  3.     "target": "ES2017",
  4.     "module": "commonjs",
  5.     "moduleResolution": "node",
  6.     "experimentalDecorators": true,
  7.     "noImplicitThis": true,
  8.     "noUnusedLocals": true,
  9.     "stripInternal": true,
  10.     "pretty": true,
  11.     "declaration": true,
  12.     "sourceMap": true,
  13.     "outDir": "dist",
  14.     "lib": ["es2017", "dom"]
  15.   },
  16.   "exclude": [
  17.     "dist",
  18.     "node_modules",
  19.     "test"
  20.   ]
  21. }

experimentalDecorators 就是用来表示是否启用装饰器，noUnusedLocals 表示是否存在没有使用的本地变量编译时报错，这些配置信息都可以在 这里应用目录结构 - 图2 查询到。

tslint.json

Tslint 对应于 Eslint 或者 Jslint，用于在不同时期进行检查，这里的配置也和 Eslint 非常相似。

比如有一些规则，每条有对应了不同的内容，比如使用单引号，不允许 var 关键字等，如果觉得开发习惯不同，可以根据 官方规则应用目录结构 - 图3 进行调整。

如果你想知道 Tslint 有什么区别，可以查看 这篇文章应用目录结构 - 图4