Why type aliases are needed in Typescript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a type alias named Age for the number type.

Typescript

type Age = [1];

Drag options to blanks, or click blank then click option'

Aboolean

Bstring

Cnumber

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using a value like 5 instead of a type like number.

Confusing type aliases with variables.

The type keyword creates a type alias. Here, Age is an alias for number.

2fill in blank

medium

Complete the code to define a type alias Point for an object with x and y as numbers.

Typescript

type Point = [1];

Drag options to blanks, or click blank then click option'

A{ x: number; y: number }

B{ x: string; y: string }

C[number, number]

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings instead of numbers for coordinates.

Using an array type instead of an object.

The type alias Point describes an object with two properties, x and y, both numbers.

3fill in blank

hard

Fix the error by completing the type alias for a union of string literals representing directions.

Typescript

type Direction = [1];

Drag options to blanks, or click blank then click option'

Aup | down | left | right

B"up" | "down" | "left" | "right"

Cstring

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving out quotes around string literals.

Using variable names instead of string literals.

Union types use the pipe | to combine string literals. Quotes are needed around each string.

4fill in blank

hard

Fill all three blanks to create a type alias Response that can be either a string or a number.

Typescript

type Response = [1] [2] [3];

Drag options to blanks, or click blank then click option'

Astring

B|

Cnumber

D&

Attempts:

3 left

💡 Hint

Common Mistakes

Using & instead of | for union.

Forgetting to separate types with |.

The union type uses | to allow Response to be either string or number.

5fill in blank

hard

Fill all three blanks to create a type alias User for an object with id as number, name as string, and an optional age as number.

Typescript

type User = { id: [1]; name: [2]; age?: [3]; };

Drag options to blanks, or click blank then click option'

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong types for properties.

Forgetting the optional marker ?.

The User type has id and optional age as numbers, and name as a string. The question mark ? marks age as optional.

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