004 — Type Basics (strict types, inference, and first annotation)

Video: 004 · TypeScript Tutorial #3 - Type Basics · watch · 7:35 · Net Ninja TypeScript tutorial series, lesson 4

Source: this is a written companion to the video. Part of the Favorite TypeScript Videos curated path, module 00 (foundations). The toolchain lessons (002, 003) are assumed: the demo runs in sandbox.ts with tsc in watch mode. First actual type syntax in the series.

The editor opens on sandbox.ts beside a live preview pane. Three variables, no annotations yet — this lesson is about what TypeScript already knows before you tell it anything.

The core claim lands in one sentence: a variable declared as a string stays a string. Its value can change; its type cannot. Same for numbers, booleans, objects, arrays. That is the whole difference between TypeScript and JavaScript, and everything in the next seven minutes is evidence for it.

Declaration syntax is unchanged — let, var, const, exactly like JavaScript. Then the three types, each taught the same way: assign correctly, then watch the compiler refuse the wrong type.

let character = "mario";
character = "luigi"; // fine — different string, same type
character = 20; // ERROR: Type '20' is not assignable to type 'string'

Strings take single or double quotes (plus template literals). Numbers are one unified type — no int/float split, 30 and 40 and "yoshi" sorts itself out. Booleans flip between true and false and refuse "yes". Values are reassignable; types are not.

Here comes the quiet superpower: TypeScript was never told any of these types. It infers each one from the initializer — hover character and VS Code reports let character: string. Explicit annotation exists (let character: string = 'mario') but the video defers it; inference carries the whole lesson. (It gets its own video in 006.)

Then the lesson pivots to functions, where inference runs out. An unannotated parameter accepts anything:

const circ = (diameter) => {
	return diameter * Math.PI;
};

console.log(circ("hello")); // no squiggle, compiles, logs NaN at runtime

Math needs no import — everything built into JavaScript is available through the default libs for the configured target (which is why lib settings matter later). The browser console shows NaN: the wrong result with no error. This is the motivating failure for the entire type system.

One annotation fixes it:

const circ = (diameter: number) => {
	return diameter * Math.PI;
};

console.log(circ("hello")); // ERROR: Argument of type '"hello"' is not assignable to parameter of type 'number'
console.log(circ(7.5)); // fine — logs 23.561944901923447

Regular and arrow functions both work; the video uses arrows throughout. The workflow stays in watch mode:

tsc sandbox.ts --watch

With the annotation in place, tsc reports Found 1 error at author time — though note it still emits sandbox.js by default (stopping emit takes noEmitOnError); the win is the error surfacing before any browser run. Fix the call to circ(7.5), the error clears:

The console logs 23.561944901923447. The compiled JavaScript looks the same either way — the check happened during development, before emit. That is the payoff stated plainly at the close: type checking at author time means cleaner code and fewer browser-runtime surprises.

The outro points at collections — 005 — Objects & Arrays, where inference locks array element types and object shapes.

Prev: 003 — Compiling TypeScript · Next: 005 — Objects & Arrays

Transcript notes: booleans (not “billions”), “infer the type” (not “infuse”), sandbox.ts (not “sandvox.ts”), isBlackBelt (not “is bulk belt”). Console digits vary across frames; corrected to the true double above. Frame captions describing a class Sandbox are vision-model misreads — the lesson has no classes.