You’re working with an API response in TypeScript. It returns a list of users, and you need to loop through them to validate data or update values. You try a quick loop, but suddenly type errors pop up, or the compiler complains. Sound familiar?
That’s where understanding how to use a for loop in TypeScript properly makes a big difference. It’s not just about looping; it’s about doing it with type safety, clarity, and control.
In this article, I’ll show you 5 ways to do how to use for loop in TypeScript.
Method 1 – Basic For Loop with Array
This is the most common and beginner-friendly way. Use it when you need full control over the loop index.
Step 1: Define a typed array
const users: string[] = ["Amit", "Sara", "John"];
How does this code work?
Here, string[] defines an array of strings. TypeScript ensures only strings are allowed.
Step 2: Loop using a basic for loop
for (let i: number = 0; i < users.length; i++) {
console.log(users[i]);
}Output:
Amit
Sara
John
I executed the above example code and added the screenshot below.
How does this code work?
- let i: number defines a loop counter with type safety.
- users.length ensures the loop runs for all elements.
- users[i] accesses each item by index.Pro Tip: Always define the type of your loop counter (number) in strict mode to avoid implicit any errors.
Method 2 – For…of Loop (Cleaner Syntax)
Use this when you don’t need the index and want cleaner, readable code.
Step 1: Loop directly over values
for (const user of users) {
console.log(user);
}Output:
Amit
Sara
John
I executed the above example code and added the screenshot below.
How does this code work?
- for…of iterates over values directly.
- const user represents each element in the array.
- No index management needed.Pro Tip: Prefer for…of for better readability and fewer bugs when index is not required.
Method 3 – For…in Loop (Index-Based Iteration)
Use this when you need the index but prefer a simpler syntax than the classic for loop.
Step 1: Loop using for…in
for (const index in users) {
console.log(index, users[index]);
}Output:
0 Amit
1 Sara
2 John
I executed the above example code and added the screenshot below.
How does this code work?
- for…in iterates over keys (indexes in arrays).
- index is a string, not a number.
- users[index] accesses the value. Pro Tip: Convert index to a number using Number(index) if strict typing matters.
Method 4 – For Loop with Interface (Real-World Objects)
Use this when working with structured data, such as API responses.
Step 1: Define an interface
interface User {
id: number;
name: string;
}How does this code work?
An interface defines the shape of an object. Each user must have id and name.
Step 2: Create an array of objects
const userList: User[] = [
{ id: 1, name: "Amit" },
{ id: 2, name: "Sara" }
];
Step 3: Loop through objects
tfor (const user of userList) {
console.log(user.name);
}Output:
Amit
Sara
How does this code work?
- User[] ensures every object follows the interface.
- TypeScript enforces property access like user.name safely.Pro Tip: Always use interfaces for API data to avoid runtime errors and improve IntelliSense.
Method 5 – Traditional For Loop with Break/Continue
Use this when you need control flow like skipping or stopping early.
Step 1: Loop with condition
for (let i = 0; i < users.length; i++) {
if (users[i] === "Sara") {
continue;
}
console.log(users[i]);
}Output:
Amit
John
How does this code work?
- continue skips the current iteration.
- The loop continues with the next value.
- Useful in validation or filtering logic.Pro Tip: Use a break to stop loops early when searching for a match; it improves performance.
Things to Keep in Mind
- Avoid implicit any: Always define types like number, string[], or User[] to prevent compiler errors in strict mode.
- for…in returns strings: TypeScript Array indexes come as strings, which can cause type mismatch issues.
- Use interfaces for objects: They ensure consistent structure and better type safety when looping.
- Prefer for…of for arrays: It avoids index errors and improves readability.
- Strict null checks: Ensure values exist before accessing properties, especially with optional fields.
- Don’t overuse any: Using any disables TypeScript’s type safety benefits. Use unknown if needed.
You learned five practical ways to use a for loop in TypeScript, from basic loops to interface-based iteration. Use for…of for clean code, and switch to classic loops when you need more control. I hope you found this article helpful.
You may also read:
- Why Use TypeScript? Top 10 Benefits for Modern Web Development
- TypeScript Exception Handling
- Implement Queues in TypeScript
- 100 TypeScript Interview Questions And Answers
Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.
