Command Palette

Search for a command to run...

Hectal
Phase 12Intermediate13 of 18 in TypeScript

The Compiler and tsconfig

How tsc reads tsconfig.json, what strict and its extra flags catch, how target, lib and emit work, project references, ways to run TypeScript, and compiler speed.

Until now the compiler was a box that said yes or no. This phase opens the box. You'll read a tsconfig.json line by line, learn which flags catch which real bugs, and see what tsc actually writes to disk when it emits JavaScript.

You'll also meet the parts of a real project: several tsconfig files that extend each other, project references that build a monorepo in order, and the different ways to run TypeScript (compile first, let Node strip the types, or use a bundler). Along the way you'll see what changed in TypeScript 6.0 and 7.0, so an old config doesn't surprise you.

Flags that behave the same in 6.0 and 7.0 are live: the same code runs with a flag off and on and the Types panel shows the difference. Options that were removed in 7.0 and everything about folders and tools are shown as real terminal sessions from real tiny projects.

0/6 · 0%
6 topics ~2 h 21 code blocks & diagrams
Start with the first topic
1
12.1

tsconfig.json from Top to Bottom

A tsconfig.json is the settings file the compiler reads: which files belong to the project, which rules to check them with, and what to write out. Reading it fluently is the base for everything else in this phase.

23 min 3 code practice

2
12.2

The strict Family and Extra Checks

strict is a bundle of nine switches, each of which closes one specific hole in the type system, and a few extra flags go beyond it. Knowing the real bug each one catches tells you what to keep on and how to turn them on one at a time in an old codebase.

24 min 8 code practice

3
12.3

target, lib and Emit

target decides how new JavaScript syntax is rewritten for older engines, lib decides which built-in names the checker knows about, and the emit options decide what files tsc writes and where. These three are separate, and mixing them up causes most confusing build errors.

29 min 3 code practice

4
12.4

Project References and tsc --build

Project references let you split a big codebase into smaller TypeScript projects that build in dependency order and rebuild only what changed. tsc --build and the .tsbuildinfo file are how it knows what to skip.

24 min 2 code practice

5
12.5

Ways to Run TypeScript

No engine runs TypeScript directly: the types are always removed first. You can do that with tsc, with Node's built-in type stripping, or with a fast tool like esbuild or Vite, and only tsc itself checks the types, so a pipeline needs both jobs covered.

24 min 3 code practice

6
12.6

Compiler Performance and Diagnostics

When the type checker feels slow you can measure it: --extendedDiagnostics counts the work, --generateTrace shows where the time went, and a few habits keep types cheap. TypeScript 7's native compiler is about ten times faster, and this topic also covers how to upgrade from 5.x through 6.0 to 7.0.

24 min 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Fix the Implicit any

Strict mode refuses two functions whose parameters have no types. Give every parameter a real type so the file type-checks, and don't use the word any.

Beginner
2

A Value That May Be Missing

displayName should show a user's nickname in capital letters, or their real name in capital letters when they have no nickname. The first version crashes for users without a nickname, and strictNullChecks already points at the line.

Beginner
3

Reading by Index Safely

noUncheckedIndexedAccess is on, so items[items.length - 1] has the type number | undefined: the list might be empty. lastOf promises a number, so the checker rejects it.

Intermediate
4

Fallthrough and Missing Returns

This file turns on noFallthroughCasesInSwitch and noImplicitReturns in its tsconfig. shippingCost has two bugs the flags report: the "local" case runs on into "state", and unknown zones fall off the end of the function.

Intermediate
5

Missing Is Not undefined

exactOptionalPropertyTypes is on (it comes from tsc --init): volume?: number means the key may be absent, not that it may hold undefined. mute assigns undefined, which the checker rejects.

Intermediate
6

Rewrite for Type Stripping

This file's tsconfig turns on erasableSyntaxOnly, so it can run under Node's built-in type stripping. The enum and the constructor parameter properties (public name) are not allowed.

Intermediate