Creating type aliases in Typescript - Visual Walkthrough

Concept Flow - Creating type aliases

Start

↓

Write 'type' keyword

↓

Give alias a name

↓

Assign a type to alias

↓

Use alias in code

↓

End

This flow shows how to create a type alias by naming it and assigning a type, then using it in code.

Execution Sample

Typescript

type Age = number;
let myAge: Age = 30;
console.log(myAge);

This code creates a type alias 'Age' for number, then uses it to declare a variable and print it.

Execution Table

Step	Action	Evaluation	Result
1	Declare type alias 'Age' as number	type Age = number	Alias 'Age' now means 'number'
2	Declare variable 'myAge' with type 'Age'	let myAge: Age = 30	myAge is number 30
3	Print 'myAge'	console.log(myAge)	Output: 30
4	End of code	No more statements	Execution stops

💡 All statements executed, program ends

Variable Tracker

Variable	Start	After Step 2	Final
myAge	undefined	30	30

Key Moments - 2 Insights

Why do we use 'type' instead of 'interface' here?

'type' creates an alias for any type, including primitives like number, while 'interface' is mainly for object shapes. See step 1 in execution_table.

Does 'Age' create a new type or just a new name?

'Age' is just a new name for 'number', not a new type. So variables of type 'Age' behave exactly like numbers. See step 2 and 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'myAge' after step 2?

A Age

B 30

C undefined

D number

💡 Hint

Check the variable_tracker row for 'myAge' after step 2

At which step does the program print the value 30?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Action' column in execution_table for console.log

If we change 'type Age = number;' to 'type Age = string;', what changes in the execution?

A myAge can only be a string now

B myAge remains a number

C The program will print 'number'

D The alias 'Age' disappears

💡 Hint

Type alias defines the type used for variables declared with it, see step 1 and 2

Concept Snapshot

Creating type aliases in TypeScript:
- Use 'type AliasName = Type;' syntax
- Alias can be primitive, union, or object types
- Use alias as a type annotation
- Alias is just a new name, not a new type
- Helps make code clearer and reusable

Full Transcript

This visual trace shows how to create and use a type alias in TypeScript. First, the 'type' keyword defines an alias 'Age' for the number type. Then, a variable 'myAge' is declared with type 'Age' and assigned the value 30. Finally, printing 'myAge' outputs 30. The alias 'Age' is just a new name for number, so it behaves exactly like a number type. This helps make code easier to read and maintain. The execution table and variable tracker show each step and how the variable changes. Common confusions include understanding that 'type' creates a name, not a new type, and why 'type' is used instead of 'interface' for primitives.