033 — #11 Union Type in TypeScript | TypeScript Basics & Data Types | A Complete TypeScript Course

Video: 033 · #11 Union Type in TypeScript | TypeScript Basics & Data Types | A Complete TypeScript Course · watch · ~10:52 · procademy

Source: this is a written companion to the video. Part of the Favorite TypeScript Videos curated path. Narrative mined from transcript + visual captions (h9kRkfDUCIE-narrative.md).

The lecture opens with the definition, stated once and then demonstrated twice: a union type “is used to specify that a variable function parameter or return type can be one of the several possible types.” The pipe symbol (|) separates the members.

a lookup that starts empty

The editor opens on app.ts inside a getUser function that pretends to call an API. Two locals stand in for the database row — a uname holding "John" and a uage holding 28. The user local is typed as an object with name: string and age: number, piped with null, and initialized to null:

let user: { name: string; age: number } | null = null;
// later, inside getUser:
user = { name: uname, age: uage };

The const-to-let correction happens on camera: because user is reassigned from null to the real object, it must be declared with let. The teaching point is plain — “for a variable we can specify all the possible types which it can store.”

one parameter, two shapes

Next the screen cuts to printStatus, whose code parameter accepts string | number:

function printStatus(message: string, code: string | number) {
	console.log(`${message}, status code: ${code}`);
}
printStatus("request was successful", 200); // numeric code, fine
printStatus("resource was not found", "404"); // string code, fine

Both calls compile and log. Removing number from the union immediately errors on the 200 call — proof that the union, not any, is doing the permitting.

the one rule unions enforce

Passing " 404" with a leading space motivates trimming the code, but code.trim() fails to compile: “trim does not exist on type … string union number. Basically this trim method does not exist on type number.” The rule follows — “whatever property or method we will use, it must be available on all the types in that union type.” The fix is a narrowing guard:

if (typeof code === "string") {
	code = code.trim();
}

After the guard, tsc compiles cleanly and the space disappears from the output. The lecture closes by noting that unions scale beyond two members — append another pipe for boolean, another for null (null is itself a data type), and so on.

Prev: 032 — #04 Datatypes in TypeScript | TypeScript Basics & Data Types | A Complete TypeScript Course · Next: 034 — #12 Literal Type in TypeScript | TypeScript Basics & Data Types | A Complete TypeScript Course

Transcript notes: uname / uage (not “you age”, “U age”), trim (not “strim”, “strict method”), if-else (not “ifLs”), app.ts (not “ebb.ts”, “f.ts”). Timestamps cover the definition, the let correction, the trim error, and the narrowing rule.