TypeScript Survival Guide

Favorite typescript videos

034 — #12 Literal Type in TypeScript | TypeScript Basics & Data Types | A Complete TypeScript Course

The lecture builds directly on the union-type session: where unions list which *kinds* of value a variable may hold, literal types pin down the *exact* value it may hold. The opening contrast is `const str = "hello world"` (hover type is the literal `"hello world"`) versus `let str2 = "some string"` (hover type is `string`). The main demo is a `roleMessage(role)` function with a `switch` over `"ad

Video: 034 · #12 Literal Type in TypeScript | TypeScript Basics & Data Types | A Complete TypeScript Course · watch · ~07:36 · procademy

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

The lecture builds directly on the union-type session (033): where unions list which kinds of value a variable may hold, literal types pin down the exact value it may hold. “Using literal types, we don’t just tell what type of value we want to store in the variable, but we tell exactly what value we want to store in a variable.”

course title slide with the VS Code TypeScript editor visible

const narrows, let widens

The editor opens on two declarations side by side:

const str = "hello world"; // hover type: "hello world" (literal)
let str2 = "some string"; // hover type: string

Hovering tells the story: const cannot be reassigned, so TypeScript narrows its type to the assigned value itself; let may be reassigned, so its type stays widened to string.

a role parameter that accepts garbage

Next the screen cuts to roleMessage, a switch over three permission strings:

function roleMessage(role: string) {
	switch (role) {
		case "admin":
			console.log("you have admin permission on this site");
			break;
		case "read":
			console.log("you have read permission on this site");
			break;
		case "read-write":
			console.log("you have read-write permission on this site");
			break;
		default:
			console.log("unknown user permission");
	}
}

With role: string, roleMessage("ABC") compiles and falls into default. The requirement is explicit: only "admin", "read", or "read-write" should be passable — “No other string value should be allowed.”

three literals instead of string

The fix swaps one word for three values:

function roleMessage(role: "admin" | "read" | "read-write") {
	/* ... */
}
roleMessage("ABC"); // error: not assignable to parameter type
roleMessage("admin"); // fine — logs "you have admin permission on this site"

Hovering the parameter no longer shows string — it shows the three-literal union. The rule generalizes the lesson: “a literal type basically tells what exact value we are going to accept for a variable or for a function parameter.” The close adds that literals need not be strings — numbers, booleans, null, and undefined all work.

Prev: 033 — #11 Union Type in TypeScript | TypeScript Basics & Data Types | A Complete TypeScript Course · Next: 035 — #13 Understanding Type Alias | TypeScript Basics & Data Types | A Complete TypeScript Course

Transcript notes: str / str2 (not “stR”, “STR 2”), role / admin (not “roll”, “Edmin”), read-write (not “read right”, “readwrite”), app.ts (not “e.TS file”, “abduct TS”); the parameter annotation is a type annotation, not a type assertion.