liveBook · Manning

TypeScript compiler

As explained in Essential TypeScript 5, Third Edition

The TypeScript compiler translates TypeScript source files into JavaScript files and performs TypeScript and optionally JavaScript diagnostics.

The TypeScript compiler, `tsc`, turns `.ts` files into JavaScript that a browser or Node.js can execute. It checks code against JavaScript rules and TypeScript features such as static types, then removes TypeScript-only syntax from the emitted JavaScript. The runtime executes that JavaScript, not the TypeScript source. section 5.4 section 2.6

Compile a small project

In `tsconfig.json`, set `compilerOptions` to `{ "target": "ES2022", "rootDir": "./src", "outDir": "./dist" }`. Put `index.ts` in `src`, run `tsc` from the project folder, then run `node dist/index.js`. Edit the `.ts` file rather than the generated `.js` file: the next compilation overwrites output in `dist`. section 2.2.2 section 2.2.4

Configuration controls what the compiler reads, checks, and writes:

  • Use `files`, `include`, or `exclude` to select source files; run `tsc --listFiles` to inspect the selection, including type declarations. section 5.4
  • Set `target` for the JavaScript version required by the runtime. With an `ES5` target, an arrow function becomes a function expression and `let` becomes `var`. section 5.6
  • Select a compatible module format for multi-file applications. CommonJS and ECMAScript module output have different runtime requirements; ECMAScript modules in the Node.js example also require project configuration and a `.js` import extension. section 5.8
  • Enable `declaration` to generate `.d.ts` files that expose inferred types alongside JavaScript output. section 7.2.2

A reported error can still produce JavaScript

For `function printMessage(msg: string) { console.log(msg); }`, the call `printMessage(100)` produces a type-mismatch error. By default, `tsc` still emits JavaScript containing the call. Set `"noEmitOnError": true` in `compilerOptions` to stop new output when errors are detected. section 5.5.1

For repeated edits, watch mode recompiles changed TypeScript files. It does not itself rerun the resulting program; `tsc-watch` can execute `node dist/index.js` after a successful compilation. The compiler is a build-time checker and translator, while Node.js or a browser remains responsible for running the application. section 5.10 section 5.0

How Essential TypeScript 5, Third Edition covers it

How deep it goes
Works through project configuration, diagnostics, emission behavior, JavaScript targets, and module formats; does not explain compiler implementation internals.
Examples
Uses `src/index.ts` and `dist/index.js`, a mismatched function argument, ES5 output, and a two-file module application.
What it assumes
Assumes familiarity with JavaScript code while showing how to install TypeScript and set up compilation with NPM.
What you can do after
Operate/configure it with `tsc` and `tsconfig.json` to compile, inspect diagnostics, and choose output for a target runtime.
How it connects
Connects static types and type declarations to JavaScript runtimes, ECMAScript targets, and CommonJS or ECMAScript modules.

Also explained in

Compare how 2 books explain TypeScript compiler →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Essential TypeScript 5, Third Edition. The section links point to the parts of the book it draws on.