Type alias for unions in Typescript - Time & Space Complexity
Let's see how the time it takes to run code changes when we use type aliases for unions in TypeScript.
We want to know how the program's work grows as the input size changes.
Analyze the time complexity of the following code snippet.
type Status = "success" | "error" | "loading";
function handleStatus(status: Status) {
switch (status) {
case "success":
return "Operation succeeded";
case "error":
return "Operation failed";
case "loading":
return "Loading...";
}
}
This code defines a type alias for a union of string literals and uses it in a function with a switch-case to handle each case.
Identify the loops, recursion, array traversals that repeat.
- Primary operation: The switch statement checks the input once per function call.
- How many times: Exactly one time per call; no loops or recursion.
Explain the growth pattern intuitively.
| Input Size (n) | Approx. Operations |
|---|---|
| 10 | 1 |
| 100 | 1 |
| 1000 | 1 |
Pattern observation: The switch performs a constant number of operations regardless of input size.
Time Complexity: O(1)
This means the time to run remains constant regardless of the input size.
[X] Wrong: "Using a union type alias makes the function run faster because it limits options."
[OK] Correct: The type alias helps with code clarity and safety but does not change how many checks the function does at runtime.
Understanding how type aliases affect runtime helps you explain code clarity versus performance, a useful skill in real projects and interviews.
What if we added more cases to the union type? How would the time complexity change?
Practice
What does a type alias for unions in TypeScript do?
Solution
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.Step 2: Understand union types
A union type means a value can be one of several types, like string or number.Final Answer:
Gives a single name to multiple possible types -> Option CQuick Check:
Type alias for unions = single name for multiple types [OK]
- Thinking it creates variables instead of naming types
- Confusing union with function return types
- Assuming it declares constants
Which of the following is the correct syntax to create a type alias MyType that can be either string or number?
Solution
Step 1: Recall correct keyword for type alias
Use the keywordtypeto create a type alias, notalias.Step 2: Use union operator for multiple types
The union operator is|, not&. Sostring | numberis correct.Final Answer:
type MyType = string | number; -> Option AQuick Check:
type + union (|) = correct syntax [OK]
- Using 'alias' instead of 'type'
- Using '&' instead of '|' for unions
- Mixing syntax from other languages
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 errorSolution
Step 1: Understand the type alias Status
Status can only be "success" or "error" strings.Step 2: Check function calls
Calling printStatus with "success" and "error" prints those values. "pending" is invalid and commented out.Final Answer:
success\nerror -> Option DQuick Check:
Valid union values print correctly [OK]
- Assuming invalid union values print without error
- Thinking it causes runtime error
- Ignoring commented invalid call
Identify the error in this TypeScript code using a type alias for unions:
type ID = number | string; let userId: ID = true;
Solution
Step 1: Check type alias definition
ID allows only number or string values.Step 2: Check assigned value type
Assigningtrueis boolean, which is not allowed by the union.Final Answer:
Type 'boolean' is not assignable to type 'number | string' -> Option AQuick Check:
Assigning wrong type causes error [OK]
- Thinking union allows any type
- Ignoring type mismatch errors
- Confusing syntax errors with type errors
Given the type alias type Response = { status: "ok"; data: string } | { status: "error"; error: string };, which of the following objects matches the Response type?
Solution
Step 1: Analyze the first union type
When status is "ok", object must have a string property named data.Step 2: Analyze the second union type
When status is "error", object must have a string property named error.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.Final Answer:
{ status: "ok", data: "File loaded" } -> Option BQuick Check:
Match status with correct property name and type [OK]
- Mixing properties from different union types
- Using wrong property types
- Ignoring the status-property relationship
Ready to prove it?
Pass the test and this pattern moves unknown
