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.

Practice

1. What is the main purpose of creating a type alias in TypeScript?

easy

A. To import external modules

B. To create a new variable

C. To define a function

D. To give a new name to a type for easier reuse

Solution

1. Step 1: Understand what a type alias does

   A type alias creates a new name for an existing type, making code easier to read and reuse.

2. Step 2: Compare options with the definition

   Only To give a new name to a type for easier reuse correctly describes this purpose; others describe unrelated concepts.

3. Final Answer:

   To give a new name to a type for easier reuse -> Option D

4. Quick Check:

   Type alias = new name for type [OK]

Hint: Type aliases rename types to simplify code [OK]

Common Mistakes:

• Confusing type alias with variable declaration
• Thinking type alias creates new data
• Mixing type alias with function definitions

2. Which of the following is the correct syntax to create a type alias named Age for the type number?

easy

A. alias Age: number;

B. type Age = number;

C. let Age: number;

D. type Age == number;

Solution

1. Step 1: Recall TypeScript syntax for type aliases

   The correct syntax uses the keyword type, followed by the alias name, an equals sign, and the type.

2. Step 2: Check each option

   type Age = number; matches the correct syntax exactly. Options B, C, and D have syntax errors or wrong keywords.

3. Final Answer:

   type Age = number; -> Option B

4. Quick Check:

   type alias syntax = type Name = Type [OK]

Hint: Use 'type Name = Type;' to create aliases [OK]

Common Mistakes:

• Using 'alias' instead of 'type'
• Using '==' instead of '='
• Confusing type alias with variable declaration

3. What will be the output of this TypeScript code?

type ID = string | number;
function printId(id: ID) {
  console.log(typeof id);
}
printId(123);
printId('abc');

medium

A. Error at compile time

B. string
number

C. number
string

D. ID
ID

Solution

1. Step 1: Understand the type alias and function behavior

   The alias ID allows string or number. The function prints the type of the argument.

2. Step 2: Trace the function calls

   Calling printId(123) prints 'number'. Calling printId('abc') prints 'string'.

3. Final Answer:

   number string -> Option C

4. Quick Check:

   typeof 123 = number, typeof 'abc' = string [OK]

Hint: Check typeof values for union type inputs [OK]

Common Mistakes:

• Assuming type alias changes runtime behavior
• Expecting compile error for union types
• Mixing order of printed types

4. Identify the error in this TypeScript code:

type User = {
  name: string;
  age: number;
}

const user: User = {
  name: 'Alice',
  age: '25'
};

medium

A. Property 'age' should be a number, not a string

B. Missing semicolon after type alias

C. Type alias name cannot be 'User'

D. Object properties must be declared with 'let'

Solution

1. Step 1: Check the type alias definition

   The alias User expects age to be a number.

2. Step 2: Check the object assigned to user

   The object has age: '25', which is a string, causing a type error.

3. Final Answer:

   Property 'age' should be a number, not a string -> Option A

4. Quick Check:

   Type mismatch in object property [OK]

Hint: Match property types exactly in objects [OK]

Common Mistakes:

• Ignoring type mismatch in object properties
• Thinking semicolon is mandatory after type alias
• Confusing variable declaration rules with type alias

5. Given these type aliases:

type Point = { x: number; y: number };
type Circle = { center: Point; radius: number };
type Shape = Circle | Point;

Which of the following is a valid Shape object?

hard

A. { center: { x: 0, y: 0 }, radius: 5 }

B. { x: 0, y: 0, radius: 5 }

C. { center: { x: 0 }, radius: 5 }

D. { x: '0', y: 0 }

Solution

1. Step 1: Understand the type aliases

   Point is an object with x and y as numbers. Circle has a center of type Point and a radius number. Shape can be either.

2. Step 2: Check each option against the types

   { center: { x: 0, y: 0 }, radius: 5 } matches Circle exactly. { x: 0, y: 0, radius: 5 } has extra radius on a Point shape, invalid. { center: { x: 0 }, radius: 5 } has incomplete center. { x: '0', y: 0 } has x as string, invalid.

3. Final Answer:

   { center: { x: 0, y: 0 }, radius: 5 } -> Option A

4. Quick Check:

   Valid Shape = Circle or Point matching types [OK]

Hint: Match object shape exactly for union types [OK]

Common Mistakes:

• Mixing properties of union types incorrectly
• Using wrong property types inside objects
• Assuming partial objects are valid