Pelajaran modul (2/2)
Array dan Tupel
Dalam JavaScript, array dapat berisi semua jenis elemen dan dapat bertambah atau berkurang secara dinamis. TypeScript menambahkan pemeriksaan tipe statis untuk memastikan koleksi tetap homogen atau menghormati struktur tipe tetap.
Array (Koleksi Homogen)
Di TypeScript, ada dua cara yang setara untuk menentukan tipe array yang berisi elemen bertipe sama:
-
Menggunakan tipe elemen diikuti tanda kurung siku (
[]):TSconst numbers: number[] = [1, 2, 3]; const strings: string[] = ['a', 'b', 'c']; -
Menggunakan tipe
Array<T>generik:TSconst numbers: Array<number> = [1, 2, 3];
Kedua sintaksis sepenuhnya valid, namun yang pertama (type[]) adalah gaya konvensional dan paling umum. Jika Anda mencoba memasukkan nilai yang tidak valid (misalnya numbers.push("hello") pada array number[]), TypeScript akan menghasilkan kesalahan waktu kompilasi.
Tupel (Array dengan Panjang Tetap)
tuple adalah tipe array khusus yang memiliki jumlah elemen tetap dengan setiap elemen memiliki tipe spesifik yang telah ditentukan sebelumnya berdasarkan posisinya.
Misalnya, untuk menyimpan respons HTTP yang terbuat dari kode status (angka) dan pesan (string):
const response: [number, string] = [200, 'OK'];Dalam hal ini:
- Elemen pertama (
response[0]) harus berupanumber. - Elemen kedua (
response[1]) harus berupastring. - Array harus diinisialisasi dengan tepat 2 elemen.
Tupel Hanya-Baca (readonly)
Detail penting tentang tupel di TypeScript adalah bahwa pada saat runtime, tupel tersebut merupakan array JavaScript normal. Ini berarti bahwa metode mutatif seperti .push() atau .pop() secara teknis tersedia dan dapat mengubah panjang tuple, sebagian melewati pemeriksaan tipe.
Untuk mencegah perilaku ini dan menerapkan kekekalan yang sebenarnya, kita dapat menggunakan pengubah readonly:
const point: readonly [number, number] = [10, 20];
// point.push(30); // Compile-time error!Cobalah sendiri
Latihan 1: Susunan Angka
Deklarasikan array bernama skor yang hanya berisi angka dan diinisialisasi dengan nilai 90, 85, dan 95. Gunakan anotasi tipe eksplisit untuk array tersebut. Jangan gunakan tipe apa pun.
Tunjukkan petunjuk
Gunakan sintaksis skor const: angka[] = ... atau Array<angka>.
Solusi tersedia setelah 3 upaya
Latihan 2: Tuple Koordinat 3D
Deklarasikan tupel bernama titik yang mewakili koordinat 3D (tiga angka untuk X, Y, Z) dan diinisialisasi dengan nilai 10, 20, 30. Gunakan anotasi tipe eksplisit.
Tunjukkan petunjuk
Jenis tuple harus [angka, angka, angka].
Solusi tersedia setelah 3 upaya
Latihan 3: Tuple Info Lokasi
Deklarasikan tupel bernama locationInfo yang mewakili koordinat geografis dengan namanya. Harus memuat: lintang (angka), bujur (angka) dan nama kota (string). Inisialisasi dengan nilai 41.9028, 12.4964, dan 'Roma'.
Tunjukkan petunjuk
Gunakan sintaksis untuk mendefinisikan tuple dengan tiga elemen: [number, number, string].
Solusi tersedia setelah 3 upaya
Latihan 4: Tupel Entri Log
Deklarasikan tuple bernama logEntry yang mewakili baris log. Itu harus berisi secara berurutan: stempel waktu (angka), tingkat keparahan (string), dan pesan kesalahan (string). Inisialisasi dengan stempel waktu 1716300000, level 'INFO', dan pesan 'Aplikasi dimulai'.
Tunjukkan petunjuk
Gunakan sintaksis untuk mendefinisikan tupel tiga elemen: [number, string, string] dan tetapkan nilai yang ditentukan.
Solusi tersedia setelah 3 upaya