Chuyển đến nội dung chính
eLearner.app
Mô-đun 1 · Bài học 2 trong tổng số 22/14 trong khóa học~10 min
Bài học theo mô-đun (2/2)

Mảng và bộ dữ liệu

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

tập thể dục#ts.m1.l2.e1
Nỗ lực: 0Đang tải…

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.

Đang tải trình chỉnh sửa…
Hiển thị gợi ý

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

Giải pháp khả dụng sau 3 lần thử

Exercise 2: 3D Coordinate Tuple

tập thể dục#ts.m1.l2.e2
Nỗ lực: 0Đang tải…

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.

Đang tải trình chỉnh sửa…
Hiển thị gợi ý

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

Giải pháp khả dụng sau 3 lần thử

Exercise 3: Location Info Tuple

tập thể dục#ts.m1.l2.e3
Nỗ lực: 0Đang tải…

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'.

Đang tải trình chỉnh sửa…
Hiển thị gợi ý

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

Giải pháp khả dụng sau 3 lần thử

Exercise 4: Log Entry Tuple

tập thể dục#ts.m1.l2.e4
Nỗ lực: 0Đang tải…

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'.

Đang tải trình chỉnh sửa…
Hiển thị gợi ý

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

Giải pháp khả dụng sau 3 lần thử