> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TypeScript Array

An array in TypeScript is an ordered, iterable data structure that enforces strict type checking on its elements. It ensures that all items within the collection conform to a predefined type signature, preventing runtime type errors inherent to dynamically typed JavaScript.

TypeScript provides two syntactically equivalent approaches to declare an array type: the square bracket notation and the generic array type.

```typescript theme={"dark"}
// Square bracket notation (Standard convention)
let numericArray: number[] = [1, 2, 3];

// Generic Array type
let stringArray: Array<string> = ["a", "b", "c"];
```

## Complex Type Arrays

Arrays can enforce types for complex structures, including interfaces, type aliases, and union types. When using union types, parentheses are required to dictate the order of operations.

```typescript theme={"dark"}
// Union types
let mixedArray: (string | number)[] = ["hello", 42];

// Interface typing
interface User {
    id: number;
    name: string;
}
let users: User[] = [{ id: 1, name: "Alice" }];
```

## Multi-dimensional Arrays

Multi-dimensional arrays are declared by chaining the square bracket notation or nesting the generic syntax. This enforces the type signature across nested iterable levels.

```typescript theme={"dark"}
// 2D Array using bracket notation
let matrix: number[][] = [
    [1, 2],
    [3, 4]
];

// 2D Array using generic notation
let genericMatrix: Array<Array<number>> = [
    [1, 2],
    [3, 4]
];
```

## Readonly Arrays

TypeScript introduces immutability at the type level via the `readonly` modifier or the `ReadonlyArray<T>` generic. These types strip away mutating methods (e.g., `push`, `pop`, `splice`) and prevent index assignment during compilation.

```typescript theme={"dark"}
// Using the readonly modifier
let immutableNumbers: readonly number[] = [1, 2, 3];

// Using the ReadonlyArray generic
let immutableStrings: ReadonlyArray<string> = ["a", "b"];

// Compilation Errors:
// immutableNumbers[0] = 99; 
// immutableNumbers.push(4); 
```

## Type Inference

If an array is initialized without an explicit type annotation, the TypeScript compiler infers the type signature based on the union of the types of the initial elements.

```typescript theme={"dark"}
// Inferred as (number | string | boolean)[]
let inferredArray = [1, "two", true]; 
```

## Tuples (Fixed-Length Arrays)

A tuple is a specialized array subtype in TypeScript. While standard arrays represent an unbounded collection of uniform (or union) types, a tuple enforces both a fixed length and a specific type at each positional index.

```typescript theme={"dark"}
// Tuple declaration
let record: [string, number, boolean] = ["active", 100, true];

// Optional tuple elements
let optionalRecord: [string, number?] = ["pending"];

// Rest elements in tuples
let spreadTuple: [string, ...number[]] = ["scores", 98, 85, 100];
```

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor TypeScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
