07 Array dalam TypeScript

1. Apa itu Array?

Array adalah sebuah kumpulan beberapa nilai yang disimpan dalam satu variabel.

Contoh JavaScript:

let names = ["John", "Jane", "Bob"];

Artinya kita mempunyai satu variabel names yang berisi tiga nilai:

names
 ├── "John"
 ├── "Jane"
 └── "Bob"

Untuk membuat array, kita menggunakan square brackets [].

let names = ["John", "Jane", "Bob"];

Konsep dasar ini sebenarnya sama dengan JavaScript.

Lecture menjelaskan bahwa array di TypeScript juga dibuat menggunakan square brackets seperti JavaScript, tetapi perbedaannya muncul pada typing atau aturan tipe datanya.

2. Perbedaan penting Array JavaScript dan TypeScript

Ini bagian yang sangat penting.

Di JavaScript, kita bisa membuat array seperti:

let person = ["John", 28, "male", 1000];

Array tersebut berisi beberapa tipe data:

"John"   → string
28       → number
"male"   → string
1000     → number

JavaScript cukup fleksibel.

Namun TypeScript akan melihat isi array tersebut dan mencoba menentukan:

“Array ini sebenarnya boleh berisi tipe apa saja?”

TypeScript menggunakan type inference untuk menentukan jawabannya.

3. TypeScript melakukan Type Inference pada Array

Perhatikan:

let person = ["John", 28, "male", 1000];

TypeScript melihat:

"John"   → string
28       → number
"male"   → string
1000     → number

Jadi TypeScript menyimpulkan:

person = array of string or number

Secara konsep:

(string | number)[]

Artinya:

person adalah array yang boleh berisi string atau number.

Ini adalah penerapan langsung dari materi sebelumnya tentang Type Inference.

4. Kenapa Boolean tidak boleh dimasukkan?

Misalnya:

let person = ["John", 28, "male", 1000];

Kemudian kita melakukan:

person.push(true);

TypeScript akan memberikan error.

Kenapa?

Karena dari awal TypeScript sudah menyimpulkan:

person

adalah:

(string | number)[]

Artinya yang diperbolehkan hanya:

string ✅
number ✅
boolean ❌

Jadi:

person.push("Bob"); // ✅
person.push(30);    // ✅
person.push(true);  // ❌

Pesan error-nya kurang lebih:

Argument of type 'boolean' is not assignable
to parameter of type 'string | number'

Bahasa sederhananya:

“Kamu mencoba memasukkan boolean, padahal array ini hanya menerima string atau number.”

5. Kalau Array hanya berisi satu tipe

Sekarang lihat contoh:

let names = ["John", "Jane", "Bob"];

Semua isinya adalah string.

"John" → string
"Jane" → string
"Bob"  → string

Maka TypeScript akan menyimpulkan:

names: string[]

Dibaca:

names adalah array yang berisi string.

Contoh lain:

let birthYear = [1998, 1989, 2007];

Semua elemennya number.

Maka TypeScript menyimpulkan:

birthYear: number[]

6. Cara membaca string[] dan number[]

Ini syntax yang sangat penting.

string[]

let names: string[];

Artinya:

names adalah array yang hanya boleh berisi string.

Contoh:

["John", "Jane", "Bob"]

Valid.

number[]

let birthYear: number[];

Artinya:

birthYear adalah array yang hanya boleh berisi number.

Contoh:

[1998, 1989, 2007]

Valid.

Boolean array

Dengan pola yang sama:

let isActive: boolean[];

Berarti:

[true, false, true]

Valid.

7. Kenapa [] penting?

Perhatikan:

string

berarti satu nilai string.

Sedangkan:

string[]

berarti array yang berisi string.

Contohnya:

let name: string = "John";

vs:

let names: string[] = ["John", "Jane"];

Gambaran sederhananya:

string
   ↓
"John"


string[]
   ↓
["John", "Jane", "Bob"]

Jadi [] setelah tipe menunjukkan:

“Saya ingin kumpulan/array dari tipe tersebut.”

8. Type Inference pada Array dengan Multiple Types

Sekarang kembali ke contoh:

let person = ["John", 28, "male", 1000];

Karena ada:

string
number
string
number

TypeScript menyimpulkan:

(string | number)[]

Ini berarti:

person.push("David"); // ✅
person.push(5000);    // ✅

Tetapi:

person.push(true);    // ❌

Karena boolean tidak termasuk tipe yang diizinkan.

9. Bagaimana kalau Boolean ada sejak awal?

Misalnya:

let person = ["John", 28, "male", 1000, true];

Sekarang TypeScript melihat:

string
number
string
number
boolean

Jadi tipe array menjadi:

(string | number | boolean)[]

Dengan demikian:

person.push("David"); // ✅
person.push(5000);    // ✅
person.push(false);   // ✅

Tetapi misalnya:

person.push({});      // ❌

karena object tidak termasuk tipe yang sudah ditentukan.

10. Ini berhubungan dengan Type Inference

Ini sebenarnya konsep yang sudah kita pelajari sebelumnya.

Misalnya:

let age = 20;

TypeScript berpikir:

“Nilainya 20, berarti kemungkinan besar ini number.”

Maka:

age: number

Begitu juga array.

let names = ["John", "Jane"];

TypeScript berpikir:

“Semua elemen di sini string.”

Maka:

names: string[]

Dan:

let person = ["John", 28];

TypeScript berpikir:

“Ada string dan number.”

Maka:

person: (string | number)[]

11. Selain Inference, kita juga bisa menggunakan Type Annotation

Kita tidak harus selalu membiarkan TypeScript menebak.

Kita bisa mengatakan secara eksplisit:

let names: string[] = [];

Artinya kita memberi tahu TypeScript:

“names harus berupa array yang hanya berisi string.”

Sekarang:

names.push("John"); // ✅
names.push("Jane"); // ✅

Tetapi:

names.push(100);    // ❌
names.push(true);   // ❌

12. Kenapa harus [] setelah string?

Perhatikan:

let names: string = [];

Ini salah.

Karena kita mengatakan:

string

tetapi memberikan:

[]

[] adalah array, bukan string.

Yang benar:

let names: string[] = [];

Bacanya:

names adalah array dari string.

13. Contoh lengkap String Array

let names: string[] = [];

names.push("John");
names.push("Jane");
names.push("Bob");

Hasilnya:

["John", "Jane", "Bob"]

Tetapi:

names.push(100);

akan error.

Karena:

names
  ↓
string[]
  ↓
hanya string

14. Number Array

Kalau ingin array berisi angka:

let birthYear: number[] = [];

Kemudian:

birthYear.push(1998);
birthYear.push(1989);
birthYear.push(2007);

Valid.

Tapi:

birthYear.push("hello");

error.

Karena:

birthYear: number[]

berarti hanya menerima number.

15. Multiple Types menggunakan Union

Bagian yang sedikit lebih advanced adalah ketika array boleh memiliki beberapa tipe.

Misalnya kita ingin:

string
atau
number

Kita menggunakan union type:

string | number

Kemudian karena kita ingin array:

(string | number)[]

Contoh:

let person: (string | number)[] = [
  "John",
  28,
  "male",
  1000
];

Sekarang array boleh berisi:

person.push("David"); // ✅
person.push(5000);    // ✅

Tetapi:

person.push(true);    // ❌

16. Kenapa menggunakan tanda |?

Tanda:

|

disebut union.

Untuk sementara, cukup pahami:

string | number

sebagai:

“string ATAU number”

Contoh:

let value: string | number;

Berarti value boleh:

value = "hello"; // ✅

atau:

value = 123;     // ✅

tetapi:

value = true;    // ❌

Karena boolean tidak termasuk union tersebut.

Pada lecture, union type diperkenalkan secara singkat dan pembahasan lebih lanjut akan dilakukan pada materi Union Type.

17. Akses Array menggunakan Index

Setelah membuat array, kita tentu ingin mengambil datanya.

Sama seperti JavaScript, TypeScript menggunakan index.

Misalnya:

let names = ["John", "Jane", "Bob"];

Index-nya:

Value       Index

"John"  →     0
"Jane"  →     1
"Bob"   →     2

Jadi index dimulai dari 0, bukan 1.

18. Mengambil elemen pertama

console.log(names[0]);

Output:

John

Karena:

names[0]

berarti:

Ambil elemen pada index 0.

19. Mengambil elemen kedua

console.log(names[1]);

Output:

Jane

Karena:

John → 0
Jane → 1
Bob  → 2

20. Kalau index tidak ada?

Misalnya:

let names = ["John"];

Array hanya punya:

index 0 → John

Kemudian:

console.log(names[1]);

Tidak ada elemen index 1.

Hasilnya:

undefined

Jadi konsepnya:

names[0] → "John"
names[1] → undefined

Ini mengikuti perilaku array JavaScript yang digunakan dalam lecture.

21. Mengapa TypeScript tidak selalu mencegah index yang tidak ada?

Ini poin menarik.

TypeScript tahu bahwa:

names

adalah:

string[]

Tetapi string[] berarti:

“Array yang elemen-elemennya string.”

Bukan berarti:

“Array ini pasti memiliki elemen di setiap index yang kamu minta.”

Jadi:

names[100]

secara runtime bisa menghasilkan:

undefined

jika index tersebut tidak ada.

22. Looping Array

Lecture kemudian menggunakan:

for...of

untuk melakukan looping.

Misalnya:

let birthYear = [1998, 1989, 2007];

Kita bisa melakukan:

for (let year of birthYear) {
    console.log(year);
}

Output:

1998
1989
2007

23. Bagaimana for...of bekerja?

Mari kita lihat perlahan:

for (let year of birthYear) {
    console.log(year);
}

Bagian:

let year

adalah variabel yang akan menerima setiap elemen.

Sedangkan:

of birthYear

berarti:

“Ambil setiap elemen dari birthYear.”

Misalnya array:

birthYear = [1998, 1989, 2007];

Prosesnya kira-kira:

Iterasi pertama

year = 1998

maka:

console.log(year);

menghasilkan:

1998

Iterasi kedua

year = 1989

output:

1989

Iterasi ketiga

year = 2007

output:

2007

24. for...of mengambil VALUE, bukan INDEX

Ini penting untuk diingat.

for (let year of birthYear) {
    console.log(year);
}

year berisi:

1998
1989
2007

Bukan:

0
1
2

Kalau ingin index, pendekatannya berbeda.

Untuk saat ini cukup ingat:

for...of

→ mengambil value dari array satu per satu.

25. Gambaran Besar Array di TypeScript

Sekarang kita gabungkan semuanya.

Array String

let names: string[] = [
    "John",
    "Jane",
    "Bob"
];

Hanya boleh string.

Array Number

let birthYear: number[] = [
    1998,
    1989,
    2007
];

Hanya boleh number.

Array Boolean

let statuses: boolean[] = [
    true,
    false,
    true
];

Hanya boleh boolean.

Array String atau Number

let person: (string | number)[] = [
    "John",
    28,
    "male",
    1000
];

Boleh:

string ✅
number ✅

Tidak boleh:

boolean ❌
object ❌

26. Inference vs Annotation

Ini adalah salah satu bagian terpenting dari lecture.

Ada dua cara.

Cara 1 — Type Inference

let names = ["John", "Jane"];

TypeScript otomatis mengetahui:

string[]

Cara 2 — Type Annotation

let names: string[] = ["John", "Jane"];

Kita sendiri memberi tahu:

names adalah string array

Keduanya valid.

27. Kapan menggunakan Inference?

Kalau TypeScript sudah bisa mengetahui tipe array dengan jelas:

let names = ["John", "Jane", "Bob"];

tidak perlu menulis:

let names: string[] = ["John", "Jane", "Bob"];

Karena TypeScript sudah tahu.

28. Kapan Annotation berguna?

Annotation sangat berguna ketika kita ingin menentukan aturan sebelum array memiliki isi.

Misalnya:

let names: string[] = [];

Kalau hanya:

let names = [];

kita tidak sedang secara eksplisit mengatakan:

array ini harus berisi string.

Dengan:

let names: string[] = [];

kita menetapkan aturan dengan jelas.

Kemudian:

names.push("John"); // ✅

tetapi:

names.push(123);    // ❌

29. Analogi sederhana

Bayangkan array adalah sebuah kotak.

string[]

Bayangkan ada kotak dengan label:

┌─────────────────────┐
│ HANYA STRING        │
├─────────────────────┤
│ "John"              │
│ "Jane"              │
│ "Bob"               │
└─────────────────────┘

Kalau kamu mencoba memasukkan:

123

TypeScript berkata:

❌ Tidak boleh. Kotak ini hanya menerima string.

number[]

┌─────────────────────┐
│ HANYA NUMBER        │
├─────────────────────┤
│ 1998                │
│ 1989                │
│ 2007                │
└─────────────────────┘

Masukkan:

"hello"

→ ❌ tidak boleh.

(string | number)[]

┌─────────────────────┐
│ STRING ATAU NUMBER  │
├─────────────────────┤
│ "John"              │
│ 28                  │
│ "male"              │
│ 1000                │
└─────────────────────┘

String boleh.

Number boleh.

Boolean tidak boleh.

30. Hal yang perlu benar-benar kamu ingat

Kalau melihat:

string[]

langsung baca:

array of string

Kalau:

number[]

baca:

array of number

Kalau:

boolean[]

baca:

array of boolean

Kalau:

(string | number)[]

baca:

array yang setiap elemennya boleh berupa string atau number

31. Cheat Sheet

32. Contoh lengkap

Berikut contoh yang merangkum hampir seluruh isi lecture:

let names: string[] = [];

names.push("John");
names.push("Jane");

console.log(names[0]);
console.log(names[1]);

let birthYear: number[] = [
    1998,
    1989,
    2007
];

for (let year of birthYear) {
    console.log(year);
}

let person: (string | number)[] = [
    "John",
    28,
    "male",
    1000
];

person.push("David"); // OK
person.push(5000);   // OK
// person.push(true); // Error

Output bagian names:

John
Jane

Output looping birthYear:

1998
1989
2007

33. Hubungan dengan materi sebelumnya

Kalau kita tarik benang merah dari lecture-lecture sebelumnya:

Lecture Data Types

Kita belajar:

string
number
boolean

Lecture Type Annotation & Inference

Kita belajar:

let age: number = 20;

atau inference:

let age = 20;

Lecture Array

Sekarang kita menggabungkan keduanya:

let ages: number[] = [20, 25, 30];

Jadi sebenarnya:

number
  ↓
satu angka

number[]
  ↓
kumpulan angka

Begitu juga:

string
  ↓
satu string

string[]
  ↓
kumpulan string

Dan:

string | number
  ↓
satu value bisa string ATAU number

(string | number)[]
  ↓
array yang setiap elemennya bisa string ATAU number

34. Inti paling penting dari lecture

Kalau setelah belajar lecture ini kamu hanya mengingat 5 hal, ingat ini:

1. Array dibuat dengan []

let names = ["John", "Jane"];

2. TypeScript melakukan inference terhadap isi array

let names = ["John", "Jane"];

→ string[]

let years = [1998, 1989];

→ number[]

3. Kita bisa menentukan tipe array secara eksplisit

let names: string[] = [];

4. Multiple type menggunakan union

let person: (string | number)[] = [
    "John",
    28
];

5. Array bisa diakses menggunakan index dan di-loop

console.log(names[0]);

dan:

for (let name of names) {
    console.log(name);
}

Kalimat paling sederhananya:

Array di TypeScript sama-sama menggunakan [] seperti JavaScript, tetapi TypeScript mengontrol tipe data apa saja yang boleh masuk ke dalam array. TypeScript bisa mengetahui tipe tersebut secara otomatis melalui inference, atau kita bisa menentukannya sendiri menggunakan annotation seperti string[], number[], atau (string | number)[].