Why type aliases are needed in Typescript - Quick Recap

Recall & Review

beginner

What is a type alias in TypeScript?

A type alias is a way to give a new name to a type. It helps make complex types easier to read and reuse.

beginner

Why do we need type aliases instead of repeating types everywhere?

Type aliases reduce repetition and make code easier to maintain. If a type changes, you only update it in one place.

beginner

How do type aliases improve code readability?

By giving meaningful names to complex types, type aliases make code easier to understand at a glance.

intermediate

Can type aliases represent union types? Give an example.

Yes. For example, type Status = 'success' | 'error' | 'loading'; creates a type alias for these string values.

intermediate

What is one difference between type aliases and interfaces in TypeScript?

Type aliases can represent primitive types, unions, and tuples, while interfaces mainly describe object shapes.

What is the main benefit of using type aliases in TypeScript?

A To execute code faster

B To give a name to a type for easier reuse and readability

C To replace variables

D To create functions

Type aliases help by naming types, making code easier to read and reuse.

Which of these can a type alias NOT represent?

A HTML elements

B Primitive types

C Functions

D Union types

Type aliases represent types, not actual HTML elements.

If you want to change a complex type used in many places, what helps you avoid changing it everywhere?

A Class

B Variable

C Function

D Type alias

Using a type alias means you only update the type in one place.

Which syntax correctly defines a type alias for a union of string literals?

A let Direction = 'left' | 'right' | 'up' | 'down';

B interface Direction { 'left' | 'right' | 'up' | 'down' }

C type Direction = 'left' | 'right' | 'up' | 'down';

D function Direction() { return 'left' | 'right' | 'up' | 'down'; }

Type aliases use the 'type' keyword and can define unions like in option C.

Which statement is true about type aliases and interfaces?

A Type aliases can represent unions, interfaces cannot

B Interfaces can represent unions, type aliases cannot

C Both are exactly the same

D Neither can represent object shapes

Type aliases can represent unions and primitives; interfaces mainly describe object shapes.

Explain why type aliases are useful in TypeScript and give an example.

Think about how naming a type helps when you use it many times.

Describe the difference between type aliases and interfaces in TypeScript.

Consider what kinds of types each can represent.

Practice

1. Why do we use type aliases in TypeScript?

easy

A. To declare variables without types

B. To execute code faster at runtime

C. To replace interfaces completely

D. To give a simple name to a complex type for easier reuse

Solution

1. Step 1: Understand the purpose of type aliases

   Type aliases let you create a new name for a type, especially useful for complex types.

2. Step 2: Compare with other options

   They do not affect runtime speed, do not replace interfaces fully, and are not for declaring variables without types.

3. Final Answer:

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

4. Quick Check:

   Type aliases simplify complex types = A [OK]

Hint: Type aliases simplify complex types for reuse [OK]

Common Mistakes:

• Thinking type aliases improve runtime speed
• Confusing type aliases with interfaces
• Using type aliases to declare variables without types

2. Which of the following is the correct syntax to create a type alias for an object with properties name (string) and age (number)?

easy

A. type Person = { name: string; age: number };

B. alias Person = { name: string; age: number };

C. interface Person = { name: string; age: number };

D. type Person: { name: string; age: number };

Solution

1. Step 1: Recall correct type alias syntax

   Type aliases use the keyword type followed by the name, equals sign, and the type definition.

2. Step 2: Check each option

   type Person = { name: string; age: number }; matches the correct syntax. Options A, B, and C use wrong keywords or punctuation. interface Person = { name: string; age: number }; uses interface, not a type alias.

3. Final Answer:

   type Person = { name: string; age: number }; -> Option A

4. Quick Check:

   Correct type alias syntax = D [OK]

Hint: Remember: type alias uses 'type Name = Type;' [OK]

Common Mistakes:

• Using 'alias' instead of 'type'
• Confusing interfaces with type aliases
• Using colon ':' instead of equals '='

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

type ID = string | number;
function printId(id: ID) {
  if (typeof id === 'string') {
    return id.toUpperCase();
  } else {
    return id + 1;
  }
}
printId(5);

medium

A. 5

B. 6

C. Error: toUpperCase is not a function

D. undefined

Solution

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

   The type alias ID allows string or number. The function checks if id is a string, then calls toUpperCase(). Otherwise, it adds 1.

2. Step 2: Trace the function call with printId(5)

   Since 5 is a number, it goes to the else branch and returns 5 + 1 = 6.

3. Final Answer:

   6 -> Option B

4. Quick Check:

   Number input adds 1 = 6 [OK]

Hint: Check type conditions carefully to predict output [OK]

Common Mistakes:

• Assuming 5 is treated as string
• Expecting error from toUpperCase on number
• Ignoring type narrowing in if-else

4. Identify the error in this TypeScript code using a type alias:

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

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

medium

A. Name property should be a number

B. Type alias syntax is incorrect

C. Age property should be a number, not a string

D. Missing semicolon after user object

Solution

1. Step 1: Check the type alias definition

   The User type requires age to be a number.

2. Step 2: Check the object assigned to user

   The age property is given as a string "25", which conflicts with the number type.

3. Final Answer:

   Age property should be a number, not a string -> Option C

4. Quick Check:

   Type mismatch in property = B [OK]

Hint: Match property types exactly as defined [OK]

Common Mistakes:

• Ignoring type mismatch errors
• Thinking semicolon is mandatory after object
• Confusing type alias syntax with interface

5. You want to create a reusable type alias for a function that takes a string and returns a boolean. Which of these is the best way to define it and use it in a function?

hard

A. type StringCheck = (input: string) => boolean;
const isLong: StringCheck = input => input.length > 5;

B. type StringCheck = string => boolean;
const isLong: StringCheck = input => input.length > 5;

C. type StringCheck = (string) => bool;
const isLong: StringCheck = input => input.length > 5;

D. type StringCheck = (input: string) => bool;
const isLong: StringCheck = input => input.length > 5;

Solution

1. Step 1: Review correct function type alias syntax

   Function types use the form (param: type) => returnType. Boolean type is boolean in TypeScript.

2. Step 2: Check each option for syntax correctness

   type StringCheck = (input: string) => boolean; const isLong: StringCheck = input => input.length > 5; correctly defines the type alias and uses it. Options A, B, and D have incorrect syntax for function types. type StringCheck = (input: string) => bool; const isLong: StringCheck = input => input.length > 5; uses bool which is invalid in TypeScript.

3. Final Answer:

   type StringCheck = (input: string) => boolean; const isLong: StringCheck = input => input.length > 5; -> Option A

4. Quick Check:

   Correct function type alias syntax = C [OK]

Hint: Function types use (param: type) => returnType syntax [OK]

Common Mistakes:

• Using 'bool' instead of 'boolean'
• Omitting parameter names or types
• Incorrect arrow function type syntax