Unknown type vs any type in Typescript - Visual Side-by-Side Comparison

Concept Flow - Unknown type vs any type

Declare variable with 'any'

↓

Assign any value

↓

Use variable freely

↓

No type checks

↓

Declare variable with 'unknown'

↓

Assign any value

↓

Use variable cautiously

↓

Type checks needed before use

Variables with 'any' accept all values and allow any operation without checks. Variables with 'unknown' accept all values but require type checks before use.

Execution Sample

Typescript

let a: any = 5;
let u: unknown = 5;

let b = a + 10;
// let c = u + 10; // Error

if (typeof u === 'number') {
  let c = u + 10;
}

Shows how 'any' allows operations freely, but 'unknown' requires a type check before using in operations.

Execution Table

Step	Variable	Value Assigned	Operation	Result	Notes
1	a	5	Declaration	a = 5	'any' accepts number 5
2	u	5	Declaration	u = 5	'unknown' accepts number 5
3	b	a + 10	Calculate b = a + 10	b = 15	'any' allows addition without error
4	c	u + 10	Attempt c = u + 10	Error	'unknown' disallows operation without check
5	typeof u === 'number'	true	Type check	Pass	Check confirms u is number
6	c	u + 10	Calculate c = u + 10	c = 15	After check, operation allowed

💡 Execution stops because 'unknown' type requires type check before operations; direct use causes error.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 6
a	undefined	5	5	5	5
u	undefined	undefined	5	5	5
b	undefined	undefined	undefined	15	15
c	undefined	undefined	undefined	undefined	15

Key Moments - 2 Insights

Why does adding 10 to 'a' work but adding 10 to 'u' causes an error?

'a' is typed as 'any', so TypeScript skips type checks and allows any operation (see step 3). 'u' is 'unknown', so TypeScript requires a type check before using it in operations (see step 4).

What must you do before using a variable of type 'unknown' in an operation?

You must check its type first, for example using 'typeof' (see step 5), to ensure it is safe to use in that operation.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'b' after step 3?

A 15

B Error

C undefined

D 5

💡 Hint

Check the 'Result' column for step 3 in the execution_table.

At which step does the type check for 'u' happen?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look for the row mentioning 'Type check' in the 'Operation' column.

If we remove the type check for 'u', what happens when we try 'u + 10'?

A It works fine like 'any'

B TypeScript gives an error

C The result is NaN

D The code runs but warns at runtime

💡 Hint

Refer to step 4 where 'u + 10' without check causes an error.

Concept Snapshot

TypeScript 'any' type disables type checking and allows any operation.
'unknown' type accepts any value but requires type checks before use.
Use 'typeof' or other checks to safely use 'unknown'.
Avoid 'any' to keep type safety.
'unknown' is safer for unknown inputs.

Full Transcript

This visual execution compares TypeScript's 'any' and 'unknown' types. Variables declared with 'any' accept any value and allow any operation without errors or checks. Variables declared with 'unknown' also accept any value but require explicit type checks before using them in operations. The code example shows assigning 5 to both 'a' (any) and 'u' (unknown). Adding 10 to 'a' works immediately, but adding 10 to 'u' causes a compile error until a type check confirms 'u' is a number. The execution table traces each step, showing variable values and when errors occur. The variable tracker shows how values change after each step. Key moments clarify why 'unknown' needs checks and 'any' does not. The quiz tests understanding of these differences. The snapshot summarizes the main points: 'any' disables checks, 'unknown' requires checks, and 'unknown' is safer for unknown data.