编译器配置项-compilerOptions

模块相关（六）

根目录-rootDir

默认值：所有非声明类文件的最长公共路径。如果设置了composite选项，则默认值为 tsconfig.json 文件所在的目录。

当 TypeScript 编译文件时，它会在输出目录中保留与输入目录中相同的目录结构。

例如下边的示例，我们由以下输入的文件：

MyProj
├── tsconfig.json
├── core
│   ├── a.ts
│   ├── b.ts
│   ├── sub
│   │   ├── c.ts
├── types.d.ts

rootDir的推断值为非声明类输入文件的最长公共目录，因此rootDir的值为core/。

如果outDir配置的值为dist，那么TypeScript将要输出的目录为：

MyProj
├── dist
│   ├── a.js
│   ├── b.js
│   ├── sub
│   │   ├── c.js

如果你想将core为输出目录结构的一部分，那么在tsconfig.json文件中需要设置rootDir: "."，TypeScrit将输出以下目录结构：

MyProj
├── dist
│   ├── core
│   │   ├── a.js
│   │   ├── b.js
│   │   ├── sub
│   │   │   ├── c.js

强调：rootDir不会影响哪些文件成为编译的一部分，它与tsconfig.json中的include、exclude、files的配置没有关系。

需要注意的是，TypeScript将要输出的文件永远不会在outDir之外，并且不会跳过任意一个将要输出的文件。因此，rootDir还强制所有需要输出的文件都位于rootDir目录下。

例如，有如下的输入目录：

MyProj
├── tsconfig.json
├── core
│   ├── a.ts
│   ├── b.ts
├── helpers.ts

如果将rootDir设置为core，include设置为*，TypeScript将报告一个错误，因为将要输出的../helpers.js文件在outDir目录之外。

根目录列表-rootDirs

使用rootDirs，可以通知TypeScript编译器有许多“虚拟”目录充当单个根目录。这允许TypeScript编译器解析那些“虚拟”目录中的相对模块导入，就好像它们被合并到一个目录中一样。

例如：

src
 └── views
     └── view1.ts (can import "./template1", "./view2`)
     └── view2.ts (can import "./template1", "./view1`)
 generated
 └── templates
         └── views
             └── template1.ts (can import "./view1", "./view2")

{
  "compilerOptions": {
    "rootDirs": ["src/views", "generated/templates/views"]
  }
}

这不影响TypeScript如何输出JavaScript文件，它仅模拟这样一个假设：它们通过相对目录能够正常的工作运行。

rootDirs 可用于为非 TypeScript 或 JavaScript 的文件生成.d.ts文件时将另一个文件夹作为主目录，从而提供单独的“类型层”。这个技术对于那些打包程序中的非代码类文件的import非常有用：

 src
 └── index.ts
 └── css
     └── main.css
     └── navigation.css
 generated
 └── css
     └── main.css.d.ts
     └── navigation.css.d.ts

{
  "compilerOptions": {
    "rootDirs": ["src", "generated"]
  }
}

这个技术可以让你提前为非代码类源文件生成类型，并且可以让基于import的源文件自然的工作。例如./src/index.ts可以import文件./src/css/main.css，并且 TypeScript 将意识到打包器正确生成声明类型文件的行为。

// @filename: index.ts
import { appClass } from "./main.css";