Skip to content

Arrays and Tuples

Arrays and tuples are TypeScript’s two sequence types. Arrays hold any number of values of the same type. Tuples hold a fixed number of values where each position has its own type.

There are two equivalent syntaxes for typed arrays. Both are common — pick one and use it consistently:

const answers: string[] = ['Paris', 'London', 'Berlin', 'Madrid'];
const scores: Array<number> = [7, 5, 9, 10];

TypeScript enforces that every element matches the declared type:

const categories: string[] = ['Science', 42, 'History']; // Error: Type 'number' is not assignable to type 'string'

When TypeScript knows an array is string[], it knows that every element is a string. That knowledge flows into every operation on the array:

const answers: string[] = ['Paris', 'London', 'Berlin', 'Madrid'];
answers.forEach(a => {
console.log(a.toUpperCase()); // TypeScript knows 'a' is string — toUpperCase is valid
});
const lengths = answers.map(a => a.length); // inferred: number[]

Without a type, a would be inferred as any inside the callback, and TypeScript would not check any methods called on it.

The return types of map, filter, find, and reduce are all inferred from the element type and the callback:

const questions: string[] = [
'What planet is closest to the Sun?',
'Who painted the Mona Lisa?',
];
const lengths: number[] = questions.map(q => q.length);
const long = questions.filter(q => q.length > 30); // inferred: string[]
const first = questions.find(q => q.startsWith('Who')); // inferred: string | undefined

Notice that find returns string | undefined — TypeScript knows it may not find a match, and forces you to handle the undefined case before using the result.

A tuple is an array with a fixed length where each position has a declared type:

const entry: [string, number] = ['Paris', 1];

entry[0] is always a string. entry[1] is always a number. TypeScript enforces both the types and the order:

const entry: [string, number] = [1, 'Paris']; // Error: order is wrong
const entry: [string, number] = ['Paris']; // Error: too few elements

The Open Trivia DB API returns incorrect_answers as an array of exactly three strings. You can model this as a tuple:

const incorrectAnswers: [string, string, string] = [
'London',
'Berlin',
'Madrid',
];

This communicates that there are always exactly three wrong answers, not an arbitrary number. In practice, AceIt’s RawQuestion interface uses string[] for flexibility — but when the structure is always fixed-length, a tuple makes the contract explicit.

The core data structure in AceIt is an array of TriviaQuestion objects. You will define the TriviaQuestion interface in Module 03, but the array type reads naturally even before then:

const questions: TriviaQuestion[] = await fetchQuestions(10, 'medium');

TypeScript knows every element of questions is a TriviaQuestion. Every method call on individual elements is checked against that shape. If TriviaQuestion changes, every use of the array updates too — the compiler tells you everywhere that needs to change.

In a new file arrays.ts:

  1. Declare a string[] called allAnswers with four answer strings.
  2. Use .map() to produce a number[] of answer lengths. Let TypeScript infer the return type.
  3. Use .find() to find the first answer longer than five characters. Log the result — but first handle the case where .find() returns undefined.
  4. Declare a tuple [string, number] called scoreEntry that holds a player name and a score.
  5. Try reversing the order in the tuple and observe the error.
  • string[] and Array<string> are equivalent syntaxes for typed arrays — either is fine.
  • TypeScript infers element types inside array method callbacks — forEach, map, filter, find are all fully typed.
  • find returns T | undefined — handle the undefined case before using the result.
  • Tuples are fixed-length arrays with a specific type at each position — use them when structure and length are fixed.