Ana içeriğe geç
eLearner.app
Modül 1 · Ders 2 ders 2Kurstaki 2/14~10 min
Modül dersleri (2/2)

Diziler ve Tuple'lar

In JavaScript, arrays can contain any type of elements and can grow or shrink dynamically. TypeScript adds static type checking to ensure collections remain homogeneous or respect a fixed type structure.


Arrays (Homogeneous Collections)

In TypeScript, there are two equivalent ways to define the type of an array containing elements of the same type:

  1. Using the element type followed by square brackets ([]):

    TS
    const numbers: number[] = [1, 2, 3];
    const strings: string[] = ['a', 'b', 'c'];
  2. Using the generic Array<T> type:

    TS
    const numbers: Array<number> = [1, 2, 3];

Both syntaxes are fully valid, but the first one (type[]) is the conventional and most common style. If you try to insert an invalid value (e.g. numbers.push("hello") on a number[] array), TypeScript will generate a compile-time error.


Tuples (Fixed-Length Arrays)

A tuple is a special type of array that has a fixed number of elements where each element has a predefined specific type based on its position.

For example, to store an HTTP response made of a status code (number) and a message (string):

TS
const response: [number, string] = [200, 'OK'];

In this case:

  • The first element (response[0]) must be a number.
  • The second element (response[1]) must be a string.
  • The array must be initialized with exactly 2 elements.

Read-Only Tuples (readonly)

An important detail about tuples in TypeScript is that at runtime they are normal JavaScript arrays. This means that mutative methods like .push() or .pop() are technically available and could alter the tuple length, partially bypassing type checks.

To prevent this behavior and enforce true immutability, we can use the readonly modifier:

TS
const point: readonly [number, number] = [10, 20];
// point.push(30); // Compile-time error!

Try it yourself

Exercise 1: Array of Numbers

Egzersiz#ts.m1.l2.e1
Denemeler: 0Yükleniyor…

Declare an array named scores that contains only numbers and is initialized with the values 90, 85, and 95. Use the explicit type annotation for the array. Do not use the any type.

Düzenleyici yükleniyor…
İpucu göster

Use the syntax const scores: number[] = ... or Array<number>.

3 denemeden sonra çözüm mevcut

Exercise 2: 3D Coordinate Tuple

Egzersiz#ts.m1.l2.e2
Denemeler: 0Yükleniyor…

Declare a tuple named point that represents a 3D coordinate (three numbers for X, Y, Z) and is initialized with the values 10, 20, 30. Use explicit type annotation.

Düzenleyici yükleniyor…
İpucu göster

The tuple type must be [number, number, number].

3 denemeden sonra çözüm mevcut

Exercise 3: Location Info Tuple

Egzersiz#ts.m1.l2.e3
Denemeler: 0Yükleniyor…

Declare a tuple named locationInfo that represents a geographic coordinate with its name. It must contain: latitude (number), longitude (number) and the city name (string). Initialize it with the values 41.9028, 12.4964, and 'Rome'.

Düzenleyici yükleniyor…
İpucu göster

Use the syntax to define a tuple with three elements: [number, number, string].

3 denemeden sonra çözüm mevcut

Exercise 4: Log Entry Tuple

Egzersiz#ts.m1.l2.e4
Denemeler: 0Yükleniyor…

Declare a tuple named logEntry representing a log line. It must contain in order: a timestamp (number), a severity level (string), and an error message (string). Initialize it with timestamp 1716300000, level 'INFO', and message 'Application started'.

Düzenleyici yükleniyor…
İpucu göster

Use the syntax to define a three-element tuple: [number, string, string] and assign the specified values.

3 denemeden sonra çözüm mevcut