TypeScript — Arrays: Complete Guide with Syntax, Examples & Best Practices

Introduction – What Are Arrays in TypeScript?

In TypeScript, an array is a data structure that stores multiple values of the same type in a single variable. Arrays are a fundamental concept in both JavaScript and TypeScript, but TypeScript adds a layer of type safety, ensuring that you can’t accidentally store the wrong kind of data.

In this guide, you’ll learn:

• How to declare and type arrays in TypeScript
• Different array syntaxes (T[] and Array<T>)
• Common operations and built-in methods
• Best practices and real-world usage

Declaring Arrays in TypeScript

TypeScript supports two main ways to define arrays.

1. Using Type[] Syntax:

let fruits: string[] = ["apple", "banana", "cherry"];

2. Using Array<Type> Generic Syntax:

let scores: Array<number> = [90, 85, 100];

Both are valid, and the choice is mostly a matter of style or consistency with generics.

Array with Union Types

If an array can hold more than one type, use union types.

let mixed: (string | number)[] = ["Alice", 30, "Bob", 42];

This array accepts both string and number values.

Common Array Operations

TypeScript supports all JavaScript array operations with type checks.

Looping through arrays:

let names: string[] = ["Alice", "Bob", "Charlie"];

for (let name of names) {
  console.log(name.toUpperCase()); // safe: each item is a string
}

Adding values:

names.push("Dave"); //  Allowed
// names.push(100); //  Error: Argument of type 'number' is not assignable to type 'string'

Multidimensional Arrays

You can define arrays of arrays for tables, grids, or matrices.

let matrix: number[][] = [
  [1, 2],
  [3, 4],
  [5, 6]
];

Explanation:

• number[][] means an array of arrays of numbers.
• You can access individual values like matrix[0][1] → 2.

Readonly Arrays

If you want to prevent modifications, use readonly.

let readonlyFruits: readonly string[] = ["apple", "banana"];
// readonlyFruits.push("mango"); //  Error

Use readonly to enforce immutability and avoid side effects.

Typed Function with Array Parameters

You can pass arrays to functions and specify the expected type.

function printAll(items: string[]): void {
  items.forEach((item) => console.log(item));
}

Usage:

printAll(["pen", "paper", "book"]);

Built-in Array Methods with Type Safety

TypeScript provides intelligent autocomplete and safety checks when using array methods:

let numbers: number[] = [1, 2, 3];

let doubled = numbers.map((n) => n * 2);       // [2, 4, 6]
let filtered = numbers.filter((n) => n > 1);   // [2, 3]
let total = numbers.reduce((a, b) => a + b, 0); // 6

These methods retain type information and reduce runtime errors.

Common Errors & How to Avoid Them

Best Practices for TypeScript Arrays

• Always define the type explicitly for better readability
• Use readonly for immutable data structures
• Use generic syntax (Array<T>) when working with complex or reusable components
• Combine arrays with union types when needed
• Don’t rely on any[] unless absolutely necessary

Summary – Recap & Next Steps

Arrays in TypeScript offer a powerful and safe way to handle lists of data. With strong typing, you can prevent many common bugs and improve code clarity.

Key Takeaways:

• Use T[] or Array<T> to define array types
• Combine union types for flexible array contents
• Utilize array methods (map, filter, reduce) safely with autocomplete
• Use readonly arrays to enforce immutability
• Avoid the use of any[] to maintain type safety

Real-world relevance: Arrays are used in forms, tables, state management, APIs, data filtering, charting, and more.

FAQs – Arrays in TypeScript

Can I store different types in a TypeScript array?
Yes, by using union types. Example: (string | number)[].

Which is better: T[] or Array<T>?
Both are equivalent. Use Array<T> when working with generics or nested structures.

Can I make an array readonly?
Yes. Use readonly keyword: readonly string[].

Is it necessary to type an array?
Not mandatory, but highly recommended for better intellisense and error prevention.

How to initialize an empty array with type?

let items: string[] = [];