085 — Project Workflow with tsconfig (src, outDir, include, and watch mode)

Full companion narrative for TypeScript Tutorial #7 — splitting src from public, generating tsconfig.json with tsc --init, wiring rootDir and outDir, fencing inputs with include, and iterating with tsc -w

Video: 085 · TypeScript Tutorial #7 - Better Workflow & tsconfig · watch · ~6:50 · Net Ninja TypeScript tutorial series, lesson 7 (Shaun)

Source: this is a written companion to the video. Part of the Favorite TypeScript Videos curated path, module 00 (foundations). Single-file compiles stop scaling — this lesson sets up the project workflow every later lesson uses.

split author-time from deploy-time

The lesson opens on the old flat layout (sandbox.ts beside sandbox.js) and states the motivation: a real project has many TypeScript files plus deployables, and they should not be mixed together. The convention: a src/ folder for everything you write, a public/ folder for the compiled output the web server serves.

flat layout and the motivation for src versus public

The first attempt — tsc src/sandbox.ts compiled by hand per file — proves the pain that tsconfig.json then removes.

per-file compile attempt showing the scaling pain

generate tsconfig.json once with tsc –init

{
	"compilerOptions": {
		"target": "es5",
		"module": "commonjs",
		"strict": true
	}
}

One command scaffolds the whole commented options file: “So, if we go inside here, this is all of our TypeScript compiling configuration options…” — “This is gonna be the output of the JavaScript right here, right now we’re saying we want the output to be EtmaScript specification 5, but it could be ES 6 if you wanted it to be.”

freshly generated tsconfig.json with the terminal confirmation

wire rootDir to outDir

{
	"compilerOptions": {
		"rootDir": "./src",
		"outDir": "./public"
	}
}

Uncomment two lines and the project shape is set: sources live under src/, emit lands under public/. From here a bare tsc with no filename compiles the whole project. (“Um, then we have this one, the module, using Common JS, we’ll come to that later.”)

rootDir and outDir wired, first project compile

rootDir maps paths but does not fence inputs

A stray root-level file still gets compiled — and the watcher says so loudly:

error TS6059: File '…/typescript-tutorial/app.ts' is not under 'rootDir' '…/typescript-tutorial/src'.
'rootDir' is expected to contain all source files.

TS6059: stray root-level file outside rootDir

The fix is a top-level fence, not a compiler option:

{
	"include": ["src"]
}

“So now it’s gonna look at this and say, OK, I’m only gonna compile things inside the source folder, not anything else.” (“And right here, this is gonna be an array, and by the way, this needs to be in… double quotes as well.”)

include src fencing the project, error cleared

iterate with tsc -w

tsc -w

Re-emits on every save, watching only the fenced src/ tree: with the config file set up, a bare tsc -w watches every TypeScript file inside the source folder and recompiles automatically on each save.

watch mode recompiling on save

Prev: 084 — Explicit Types · Next: 086 — The Function Type

The auto-transcript mishears a few terms; this narrative uses the corrected forms: ECMAScript (transcript “EtmaScript”), the watch flag -w (transcript “hyphen watch”), tsconfig.json (transcript “config file”), and CommonJS (transcript “Common JS”).