Why type aliases are needed in Typescript - See It in Action

Why type aliases are needed

📖 Scenario: Imagine you are building a simple app that stores information about different pets. Each pet has a name and a type, like 'dog' or 'cat'. You want to keep your code clean and easy to understand.

🎯 Goal: You will create a type alias to represent a pet's type and then use it to define pet objects. This helps make your code clearer and easier to manage.

📋 What You'll Learn

Create a type alias called PetType with the values 'dog' and 'cat'

Create a variable called myPet with properties name and type using the PetType alias

Create a variable called anotherPet with properties name and type using the PetType alias

Print the names and types of both pets

💡 Why This Matters

🌍 Real World

Type aliases are used in real projects to keep code clean and avoid repeating complex types, especially when working with many similar objects.

💼 Career

Understanding type aliases is important for writing clear and maintainable TypeScript code, a skill valued in many software development jobs.

1

Create a type alias for pet types

Create a type alias called PetType that can be either the string 'dog' or 'cat'.

Typescript

# Your code here

Hint

Use the type keyword followed by the alias name and the allowed string values separated by |.

2

Create a pet object using the type alias

Create a variable called myPet with properties name set to 'Buddy' and type set to 'dog'. Use the PetType alias to type the type property.

Typescript

type PetType = 'dog' | 'cat';
// Your code here

Hint

Define myPet as an object with name and type. Use PetType for the type property.

3

Create another pet object using the type alias

Create a variable called anotherPet with properties name set to 'Whiskers' and type set to 'cat'. Use the PetType alias to type the type property.

Typescript

type PetType = 'dog' | 'cat';

const myPet: { name: string; type: PetType } = { name: 'Buddy', type: 'dog' };
// Your code here

Hint

Similar to myPet, create anotherPet with the given values and use PetType for the type property.

4

Print the pet details

Print the names and types of myPet and anotherPet using console.log. Use template strings to format the output like: Buddy is a dog.

Typescript

type PetType = 'dog' | 'cat';

const myPet: { name: string; type: PetType } = { name: 'Buddy', type: 'dog' };

const anotherPet: { name: string; type: PetType } = { name: 'Whiskers', type: 'cat' };
// Your code here

Hint

Use console.log with template strings like `${variable}` to print the pet details.

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