Lesson 14 · Advanced and in practice

The compiler and tsconfig

Real projects run tsc with no file names, and tsc reads tsconfig.json to learn what to do. Follow one small project as "include" picks the files, "strict" turns a silent any into error TS7006, "outDir" sends the output to dist, and "target" decides whether the ?? operator survives or is rewritten into older JavaScript.

11 min8 steps5 questionsAdvanced

Fig 14 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01You run tsc with no file names. What does it do first?

With no input files, tsc searches for tsconfig.json starting in the current folder and moving up through the parent folders. With file names (tsc a.ts) tsc does not use tsconfig.json; current versions stop with error TS5112 unless you add --ignoreConfig.

02Why does function hi(n?) { ... } give error TS7006 in this project?

n has no type, so TypeScript would treat it as any. strict includes noImplicitAny, which reports that: Parameter 'n' implicitly has an 'any' type. With "strict": false, the same file passes with 0 errors. (Since TypeScript 6.0, leaving strict out still means on.)

03With "target": "es2019", what does tsc write for return n ?? "you";?

?? arrived in ES2020. For an older target, tsc rewrites it as a test for null and undefined. Note it is not ||, which would also replace "" and 0.

04Which setting sends the output to the dist folder?

outDir is the folder tsc writes the .js files to, so src/index.ts becomes dist/index.js. include chooses which files are read, not where output goes.

05What does "rootDir": "src" tell tsc in this project?

rootDir names the folder where the source starts. tsc copies the layout below it into outDir, so src/index.ts becomes dist/index.js, not dist/src/index.js. Since TypeScript 6.0, leaving it out here is error TS5011. Which files are checked is include's job.

Key terms

Glossary

tsc: The TypeScript compiler. It checks your code against its types and writes plain JavaScript.
tsconfig.json: A JSON file at the root of a TypeScript project that holds the compiler settings. Running tsc with no file names uses it.
Compiler option: One setting tsc reads, such as target, strict or outDir. They live under compilerOptions in tsconfig.json.
include: The list of files or folders that belong to the project, such as ["src"].
strict: One switch that turns on a family of stricter checks, including noImplicitAny and strictNullChecks. On by default since TypeScript 6.0.
any: A type that means could be anything: TypeScript stops checking a value whose type is any.
target: Which version of JavaScript tsc writes. Newer syntax is rewritten into older JavaScript when the target is older.
outDir and rootDir: outDir is the folder tsc writes its .js output to, such as dist. rootDir is the folder where the source starts, such as src; its layout is copied into outDir.

Fine print

Notes and sources

Every error and every dist/index.js shown is exactly what tsc 7.0.2 writes for these files (tsc 6.0.3 writes the same). Defaults change between major versions, so set the options you rely on instead of trusting the defaults.
"rootDir": "src" tells tsc where the source starts, so src/index.ts becomes dist/index.js. Since TypeScript 6.0, leaving it out here is error TS5011.
tsc writes "use strict"; at the top of a script file (one with no import or export). Since TypeScript 6.0 it does so with or without "strict".
By default tsc still writes the .js files when it finds type errors; set "noEmitOnError": true to stop that.
With file names, as in tsc src/index.ts, tsc does not use tsconfig.json; current versions stop with error TS5112 unless you add --ignoreConfig. Use tsc -p <folder> to build a project somewhere else.
The code on all three cards is real and runnable. Both outputs print you, because hi() is called with no argument, so n is undefined.

Quiz Unlocks after the last step.