Type annotation on variables in Typescript - Time & Space Complexity
We look at how adding type annotations to variables affects the speed of a TypeScript program.
Does specifying types change how long the program takes to run?
Analyze the time complexity of the following code snippet.
let total: number = 0;
const numbers: number[] = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
total += numbers[i];
}
console.log(total);
This code sums all numbers in an array using a variable with a type annotation.
Identify the loops, recursion, array traversals that repeat.
- Primary operation: The for-loop that adds each number to total.
- How many times: Once for each item in the array.
As the array gets bigger, the loop runs more times, adding each number once.
| Input Size (n) | Approx. Operations |
|---|---|
| 10 | 10 additions |
| 100 | 100 additions |
| 1000 | 1000 additions |
Pattern observation: The work grows directly with the number of items.
Time Complexity: O(n)
This means the time to finish grows in a straight line with the input size.
[X] Wrong: "Adding type annotations makes the program slower because it adds extra work."
[OK] Correct: Type annotations are used only during coding and checking, not when the program runs, so they do not slow down execution.
Understanding that type annotations help with code clarity but do not affect runtime speed shows you know how TypeScript works behind the scenes.
"What if we replaced the for-loop with a built-in array method like .reduce()? How would the time complexity change?"
Practice
let age: number; tell us about the variable age?Solution
Step 1: Understand type annotation syntax
The colon:afteragefollowed bynumbermeansagemust hold a number value.Step 2: Interpret the meaning of
The typenumbernumberrestricts the variable to only numeric values, no strings or other types allowed.Final Answer:
It meansagecan only hold numbers. -> Option BQuick Check:
Type annotation: numbermeans only numbers [OK]
- Thinking type annotation changes the value
- Confusing type annotation with assignment
- Assuming variable can hold any type without error
name in TypeScript?Solution
Step 1: Recall correct syntax for type annotation
Type annotation uses a colon:followed by the type name without quotes.Step 2: Check each option
let name: string; useslet name: string;which is correct syntax. Options B and C miss the colon or use wrong syntax. let name: "string"; uses quotes aroundstring, which is incorrect.Final Answer:
let name: string; -> Option CQuick Check:
Use colon and type name without quotes [OK]
- Omitting the colon between variable and type
- Putting type in quotes like a string value
- Using equals sign instead of colon for type
let count: number = 5; count = 10; console.log(count);
Solution
Step 1: Analyze variable declaration and assignment
countis declared as a number and initialized to 5, then reassigned to 10, which is valid.Step 2: Understand console.log output
The last assigned value is 10, soconsole.log(count)prints 10.Final Answer:
10 -> Option AQuick Check:
Variable holds last assigned number value [OK]
- Thinking initial value 5 is printed
- Expecting error on reassignment with same type
- Confusing output with undefined
let isActive: boolean = "true";
Solution
Step 1: Check type annotation and assigned value
The variableisActiveis typed asbooleanbut assigned a string value "true".Step 2: Understand TypeScript type checking
TypeScript does not allow assigning a string to a boolean variable, causing a type mismatch error.Final Answer:
Type mismatch: string assigned to boolean. -> Option DQuick Check:
Type annotation enforces matching value types [OK]
- Ignoring quotes around boolean values
- Assuming string "true" is same as boolean true
- Thinking semicolon or variable name causes error
data that can hold either a number or a string. Which is the correct TypeScript annotation?Solution
Step 1: Understand union types in TypeScript
The pipe symbol|is used to allow a variable to hold one of multiple types.Step 2: Evaluate each option
let data: number | string; usesnumber | stringwhich meansdatacan be either number or string. let data: number & string; uses&which means intersection (both types at once), invalid here. Options C and D have incorrect syntax.Final Answer:
let data: number | string; -> Option AQuick Check:
Use|for multiple allowed types [OK]
- Using & instead of | for multiple types
- Separating types with comma or space
- Putting types inside parentheses without operator
Ready to prove it?
Pass the test and this pattern moves unknown
