Typed Arrays and Tuples

Syntax

let arr: Type[];
let tuple: [Type1, Type2];

Examples

let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob"]; // equivalent generic syntax

// numbers.push("four"); // Error - "four" is not a number

let mixed: (string | number)[] = ["id", 101, "name", "Alice"]; // union array

let point: [number, number] = [10, 20];

let nameAge: [string, number] = ["Alice", 25];
// nameAge = [25, "Alice"]; // Error - types are in the wrong positions

// A common pattern: React-style useState-esque tuple return
function useToggle(): [boolean, () => void] {
  let state = false;
  const toggle = () => { state = !state; };
  return [state, toggle];
}

Best practices

• Use Type[] for collections where every element serves the same purpose and the length is not fixed
• Use tuples when a fixed number of values with distinct meanings need to travel together, like a coordinate pair or a [value, setter] pair
• Add readonly before a tuple or array type (readonly [number, number]) when its contents should never be mutated after creation
• Prefer a named object over a tuple with more than 2-3 elements - positional meaning becomes hard to remember beyond that

At a glance

Purpose

Static types for JavaScript

File extension

.ts · .tsx

Runs in

Compiled to JavaScript

Usually used with

JavaScript and its ecosystem

Specifications & further reading

• TypeScript Handbook

Related TypeScript documentation