Type alias for unions in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a type alias named Result that can be either a string or a number.

Typescript

type Result = [1];

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

Astring & number

Bstring, number

Cstring number

Dstring | number

Attempts:

3 left

💡 Hint

Common Mistakes

Using & instead of | which means intersection, not union.

Separating types with a comma instead of |.

The | symbol creates a union type, so string | number means the type can be either a string or a number.

2fill in blank

medium

Complete the code to define a type alias Status that can be either 'success' or 'error'.

Typescript

type Status = [1];

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

A'success' 'error'

B'success' | 'error'

C'success', 'error'

D'success' & 'error'

Attempts:

3 left

💡 Hint

Common Mistakes

Using & which means intersection and is not valid for string literals here.

Separating with commas or spaces instead of |.

Using | creates a union of string literal types, allowing Status to be either 'success' or 'error'.

3fill in blank

hard

Fix the error in the type alias Input so it correctly represents a union of boolean or number.

Typescript

type Input = boolean [1] number;

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

A|

B&

C,

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using & which means intersection, not union.

Using commas or slashes which are invalid here.

The union operator | correctly combines boolean and number types.

4fill in blank

hard

Fill both blanks to define a type alias Response that can be either a string or an array of numbers.

Typescript

type Response = [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 the correct types.

Forgetting the union operator |.

The type Response can be a string or an array of numbers number[].

5fill in blank

hard

Fill all three blanks to define a type alias Data that can be a string, number, or an array of booleans.

Typescript

type Data = [1] | [2] | [3];

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

Astring

Bnumber

Cboolean[]

Dobject

Attempts:

3 left

💡 Hint

Common Mistakes

Including object which is not part of the union.

Using intersection & instead of union |.

The type Data can be a string, a number, or an array of booleans boolean[].

Practice

1.

What does a type alias for unions in TypeScript do?

easy

A. Defines a function that returns different types

B. Creates a new variable with multiple values

C. Gives a single name to multiple possible types

D. Declares a constant with union values

Solution

1. Step 1: Understand the purpose of type alias

   A type alias lets you give a name to a type or group of types for easier use.

2. Step 2: Understand union types

   A union type means a value can be one of several types, like string or number.

3. Final Answer:

   Gives a single name to multiple possible types -> Option C

4. Quick Check:

   Type alias for unions = single name for multiple types [OK]

Hint: Type alias names multiple types combined with | [OK]

Common Mistakes:

• Thinking it creates variables instead of naming types
• Confusing union with function return types
• Assuming it declares constants

2.

Which of the following is the correct syntax to create a type alias MyType that can be either string or number?

easy

A. type MyType = string | number;

B. alias MyType = string & number;

C. type MyType = string & number;

D. alias MyType = string | number;

Solution

1. Step 1: Recall correct keyword for type alias

   Use the keyword type to create a type alias, not alias.

2. Step 2: Use union operator for multiple types

   The union operator is |, not &. So string | number is correct.

3. Final Answer:

   type MyType = string | number; -> Option A

4. Quick Check:

   type + union (|) = correct syntax [OK]

Hint: Use 'type' keyword and '|' for union types [OK]

Common Mistakes:

• Using 'alias' instead of 'type'
• Using '&' instead of '|' for unions
• Mixing syntax from other languages

3.

What will be the output of the following TypeScript code?

type Status = "success" | "error";

function printStatus(s: Status) {
  console.log(s);
}

printStatus("success");
printStatus("error");
// printStatus("pending"); // Uncommenting this line causes error

medium

A. No output

B. success\nerror\npending

C. Error at runtime

D. success\nerror

Solution

1. Step 1: Understand the type alias Status

   Status can only be "success" or "error" strings.

2. Step 2: Check function calls

   Calling printStatus with "success" and "error" prints those values. "pending" is invalid and commented out.

3. Final Answer:

   success\nerror -> Option D

4. Quick Check:

   Valid union values print correctly [OK]

Hint: Only allowed union values print without error [OK]

Common Mistakes:

• Assuming invalid union values print without error
• Thinking it causes runtime error
• Ignoring commented invalid call

4.

Identify the error in this TypeScript code using a type alias for unions:

type ID = number | string;

let userId: ID = true;

medium

A. Type 'boolean' is not assignable to type 'number | string'

B. Missing semicolon after type alias

C. Type alias cannot use union types

D. Variable 'userId' must be declared with 'const'

Solution

1. Step 1: Check type alias definition

   ID allows only number or string values.

2. Step 2: Check assigned value type

   Assigning true is boolean, which is not allowed by the union.

3. Final Answer:

   Type 'boolean' is not assignable to type 'number | string' -> Option A

4. Quick Check:

   Assigning wrong type causes error [OK]

Hint: Assigned value must match union types exactly [OK]

Common Mistakes:

• Thinking union allows any type
• Ignoring type mismatch errors
• Confusing syntax errors with type errors

5.

Given the type alias type Response = { status: "ok"; data: string } | { status: "error"; error: string };, which of the following objects matches the Response type?

hard

A. { status: "ok", error: "File missing" }

B. { status: "ok", data: "File loaded" }

C. { status: "error", data: "File loaded" }

D. { status: "error", error: 404 }

Solution

1. Step 1: Analyze the first union type

   When status is "ok", object must have a string property named data.

2. Step 2: Analyze the second union type

   When status is "error", object must have a string property named error.

3. Step 3: Check each option

   { status: "ok", data: "File loaded" } matches first type correctly. Options B and C mix properties incorrectly. { status: "error", error: 404 } has error property as number, not string.

4. Final Answer:

   { status: "ok", data: "File loaded" } -> Option B

5. Quick Check:

   Match status with correct property name and type [OK]

Hint: Match status value with correct property name and type [OK]

Common Mistakes:

• Mixing properties from different union types
• Using wrong property types
• Ignoring the status-property relationship