Typeof operator in type context in Typescript - Step-by-Step Execution

Concept Flow - Typeof operator in type context

Declare variable with value

↓

Use typeof in type context

↓

Type is set to the variable's type

↓

Use new type for other variables

↓

Type checking at compile time

The typeof operator in type context extracts the type of a variable or expression, allowing reuse of that type elsewhere in the code.

Execution Sample

Typescript

const name = "Alice";
type NameType = typeof name;
const anotherName: NameType = "Bob";

This code sets a variable 'name', then creates a type 'NameType' based on 'name's type, and uses it to type another variable.

Execution Table

Step	Action	Evaluation	Result
1	Declare const name = "Alice"	name is string	name = "Alice" (string)
2	Create type NameType = typeof name	typeof name is string	NameType = string
3	Declare const anotherName: NameType = "Bob"	anotherName must be string	anotherName = "Bob" (string)
4	Try assigning anotherName = 123 (number)	Type error	Error: Type 'number' is not assignable to type 'string'

💡 Type checking stops compilation if types mismatch, ensuring type safety.

Variable Tracker

Variable/Type	Start	After Step 1	After Step 2	After Step 3	After Step 4
name	undefined	"Alice"	"Alice"	"Alice"	"Alice"
NameType	undefined	undefined	string	string	string
anotherName	undefined	undefined	undefined	"Bob"	Error

Key Moments - 2 Insights

Why does 'typeof' in type context not return a string value but a type?

In step 2 of the execution_table, 'typeof name' is used as a type operator, not a runtime operator, so it extracts the type 'string' instead of the value.

What happens if you assign a number to 'anotherName' typed as 'NameType'?

As shown in step 4, the compiler throws a type error because 'anotherName' expects a string type, enforcing type safety.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what type does 'NameType' represent?

A typeof name (value)

B number

C string

D any

💡 Hint

Check the 'Result' column at step 2 in the execution_table.

At which step does the compiler detect a type error?

A Step 1

B Step 4

C Step 3

D Step 2

💡 Hint

Look for the 'Type error' in the 'Evaluation' column in the execution_table.

If 'name' was declared as a number instead of a string, what would 'NameType' be?

A number

B string

C boolean

D any

💡 Hint

Refer to the variable_tracker and how 'NameType' depends on 'name's type.

Concept Snapshot

Typeof operator in type context:
- Syntax: type NewType = typeof existingVariable;
- Extracts the type of a variable or expression
- Used for type reuse and safety
- Does NOT get the runtime value
- Helps avoid repeating type declarations

Full Transcript

This visual trace shows how the 'typeof' operator in TypeScript's type context works. First, a variable 'name' is declared with a string value. Then, 'typeof name' is used to create a new type alias 'NameType' which represents the type of 'name', which is string. Next, another variable 'anotherName' is declared with type 'NameType' and assigned a string value. If we try to assign a number to 'anotherName', the compiler throws a type error, demonstrating type safety. The variable tracker shows how values and types evolve step-by-step. Key moments clarify that 'typeof' in type context extracts types, not values, and that type errors prevent invalid assignments. The quiz tests understanding of these steps and type relationships.