Creating type aliases in Typescript - Interactive Practice

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'

Anumber

Bstring

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using string instead of number.

Forgetting the semicolon at the end.

The Age type alias should represent the number type, so we write type Age = number;.

2fill in blank

medium

Complete the code to create a type alias named Coordinates for an object with x and y properties of type number.

Typescript

type Coordinates = [1];

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

A{ x: string; y: string }

B{ x: number; y: number }

C[number, number]

Dnumber[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using string types for x and y.

Using an array instead of an object.

The Coordinates type alias should be an object with x and y as numbers, so we write { x: number; y: number }.

3fill in blank

hard

Fix the error in the type alias declaration for Person which should have a name string and an optional age number.

Typescript

type Person = { name: string; age[1]: number };

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

A;

B:

C?

D=

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon instead of question mark for optional property.

Missing the question mark causes age to be required.

To make age optional, use a question mark after the property name: age?: number.

4fill in blank

hard

Fill both blanks to create a type alias ID that can be either a string or a number.

Typescript

type ID = [1] | [2];

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

Astring

Bnumber

Cboolean

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Using boolean or object instead of string or number.

Forgetting the pipe symbol.

The ID type alias should allow either string or number, so use a union type: string | number.

5fill in blank

hard

Fill all three blanks to create a type alias Response for an object with a status string, a data array of numbers, and an optional error string.

Typescript

type Response = { status: [1]; data: [2]; error[3]: string };

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

Astring

Bnumber[]

C?

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using boolean instead of string for status.

Forgetting the question mark for the optional error property.

The status is a string, data is an array of numbers (number[]), and error is optional, so it uses a question mark.

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