tsconfig.json中include与rootDir的区别解析

Great question—let’s break down exactly what each of these settings does and how they differ using your config as an example.

What include does #

include is all about selecting which files get compiled by TypeScript. It’s an array of file paths or glob patterns that tell the compiler: "Hey, process these files (and exclude any that match exclude patterns)."

In your config:

"include": ["./src/"]

This means every file (and subdirectory) inside ./src/ will be picked up for compilation—except the files in node_modules/* and test/*, since those are listed in exclude. Think of include as your filter for the source files you want TypeScript to process.

What rootDir does #

rootDir is all about organizing your compiled output. It defines the root folder of your source code, and TypeScript uses this path to mirror your source directory structure in the outDir you’ve specified.

In your config:

"rootDir": "./src",
"outDir": "./dist/"

Say you have a file at src/utils/helper.ts. With this setup, the compiled output will be dist/utils/helper.js—keeping the same relative structure under dist that existed under src.

A critical note: All files that get compiled (the ones matched by include) must live inside rootDir or one of its subdirectories. If you try to compile a file outside rootDir, TypeScript will throw an error because it can’t map that file to a logical place in outDir.

Core Takeaway #

• include decides which files are in the compilation set.
• rootDir decides how those compiled files are structured in the output folder.

They work together: include picks the files, rootDir ensures their output follows your source’s directory hierarchy.

内容的提问来源于stack exchange，提问作者Stephen Fong