Why Type alias for unions in Typescript? - Purpose & Use Cases

The Big Idea

What if you could fix all your type checks in one place instead of hunting them down everywhere?

The Scenario

Imagine you are writing a program that accepts different types of inputs, like numbers or strings, and you have to check each type everywhere in your code manually.

The Problem

Manually checking and writing the same union of types repeatedly makes your code long, confusing, and easy to make mistakes. If you want to change the types later, you have to find and update every place.

The Solution

Using a type alias for unions lets you name a group of types once and reuse it everywhere. This keeps your code clean, easy to read, and simple to update.

Before vs After

✗ Before

function process(input: number | string | boolean) { /* ... */ }
function validate(value: number | string | boolean) { /* ... */ }

✓ After

type Input = number | string | boolean;
function process(input: Input) { /* ... */ }
function validate(value: Input) { /* ... */ }

What It Enables

You can write clearer, shorter code that is easier to maintain and update when your types change.

Real Life Example

Think of a form that accepts user input as text or numbers. Using a type alias for the allowed input types makes handling the form data simpler and less error-prone.

Key Takeaways

Type aliases let you name complex unions once.

This reduces repetition and mistakes in your code.

It makes updating types easier and your code cleaner.

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