08 Tuple dalam TypeScript

1. Apa itu Tuple?

Tuple adalah salah satu fitur TypeScript yang tidak tersedia sebagai tipe khusus di JavaScript.

Lecture mendefinisikan tuple sebagai:

fixed-length ordered collection of elements, where each element has a specific type.

Kita sederhanakan:

Tuple adalah array yang jumlah elemennya sudah ditentukan dan tipe setiap posisi elemennya juga sudah ditentukan.

Jadi ada dua aturan utama:

1. Panjang array ditentukan
2. Tipe setiap posisi ditentukan

Misalnya kita ingin menyimpan data employee:

ID
Nama
Gaji
Status permanen

Kita ingin formatnya selalu:

[ number, string, number, boolean ]

Maka Tuple sangat cocok.

2. Ingat dulu Array biasa

Dari lecture sebelumnya kita sudah belajar:

let employee = [
    123,
    "John",
    2000,
    true
];

Ini adalah array biasa.

TypeScript akan melihat isinya:

123    → number
"John" → string
2000   → number
true   → boolean

Kemudian TypeScript akan menyimpulkan bahwa array tersebut bisa berisi:

(string | number | boolean)[]

Artinya:

Array ini boleh berisi string, number, atau boolean.

Masalahnya, array tersebut tidak memberi aturan posisi.

Misalnya secara konsep kita bisa mempunyai:

[
    "John",
    123,
    true,
    2000
]

Semua tipe tersebut masih termasuk:

(string | number | boolean)[]

Jadi secara aturan array biasa, hal tersebut masih memungkinkan.

Padahal untuk data employee kita mungkin menginginkan:

posisi 0 → ID       → number
posisi 1 → nama     → string
posisi 2 → salary   → number
posisi 3 → status   → boolean

Nah, Tuple digunakan untuk kebutuhan seperti ini.

3. Array vs Tuple

Ini perbedaan paling penting.

Array

let employee: (string | number | boolean)[];

Artinya kira-kira:

“Array ini boleh berisi string, number, atau boolean.”

Tetapi tidak menentukan:

index 0 harus apa?
index 1 harus apa?
index 2 harus apa?

Tuple

let employee: [number, string, number, boolean];

Artinya:

index 0 → number
index 1 → string
index 2 → number
index 3 → boolean

Jadi Tuple jauh lebih ketat.

4. Contoh Tuple sederhana

Kita buat:

let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000,
    true
];

Mari kita pecah.

[number, string, number, boolean]

berarti:

Posisi       Tipe

index 0  →   number
index 1  →   string
index 2  →   number
index 3  →   boolean

Dan isi kita:

index 0 → 123     → number      ✅
index 1 → "John"  → string      ✅
index 2 → 2000    → number      ✅
index 3 → true    → boolean     ✅

Semuanya cocok.

5. Perhatikan syntax-nya

Syntax Tuple terlihat seperti array:

[number, string, number, boolean]

Tetapi ada perbedaan besar.

Array

number[]

Artinya:

Semua elemen adalah number.

Misalnya:

[10, 20, 30, 40]

Tuple

[number, string, number, boolean]

Artinya:

Elemen pertama number, kedua string, ketiga number, keempat boolean.

Contoh:

[123, "John", 2000, true]

Jadi jangan sampai tertukar:

number[]
        ↓
array yang elemennya number

[number, string, number, boolean]
        ↓
tuple dengan urutan dan tipe tertentu

6. Tuple menentukan jumlah elemen

Ini salah satu kelebihan utama Tuple.

Misalnya:

let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000,
    true
];

Kita hanya menentukan empat tipe:

number
string
number
boolean

Maka Tuple tersebut memiliki panjang:

4

Artinya tidak boleh mempunyai elemen kelima.

Misalnya:

let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000,
    true,
    500
];

❌ Error.

Karena kita memberikan 5 elemen, sedangkan Tuple hanya membutuhkan 4 elemen.

Lecture menjelaskan error ini sebagai source yang memiliki lima elemen sementara target hanya mengizinkan empat.

7. Kenapa ini berguna?

Bayangkan kita membuat sistem yang membutuhkan format data seperti:

[ID, Name, Salary, IsPermanent]

Kita ingin memastikan developer lain tidak memasukkan:

[Name, ID, Salary, IsPermanent]

atau:

[ID, Salary, Name, IsPermanent]

Dengan Tuple:

[number, string, number, boolean]

TypeScript akan membantu memastikan formatnya benar.

Jadi Tuple memberikan struktur yang ketat terhadap array.

8. Tipe setiap posisi sangat penting

Misalnya kita punya:

let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000,
    true
];

Posisi pertama:

123

harus number.

Kalau kita ubah menjadi:

let employee: [number, string, number, boolean] = [
    false,
    "John",
    2000,
    true
];

❌ Error.

Kenapa?

Karena:

index 0
↓
harus number

tetapi kita memberikan:

false
↓
boolean

TypeScript akan menolak.

9. Bagaimana kalau posisi kedua salah?

Misalnya:

let employee: [number, string, number, boolean] = [
    123,
    100,
    2000,
    true
];

❌ Error.

Karena posisi kedua harus:

string

tetapi kita memberikan:

100

yang merupakan number.

Jadi Tuple benar-benar memeriksa tipe berdasarkan posisi.

10. Bayangkan Tuple seperti rak dengan slot

Ini analogi yang mudah.

Bayangkan kita mempunyai sebuah rak:

┌──────────┬──────────┬──────────┬──────────┐
│ Slot 1   │ Slot 2   │ Slot 3   │ Slot 4   │
│ number   │ string   │ number   │ boolean  │
└──────────┴──────────┴──────────┴──────────┘

Kita masukkan:

123 | John | 2000 | true

Semuanya cocok:

123   → number  ✅
John  → string  ✅
2000  → number  ✅
true  → boolean ✅

Tapi kalau:

John | 123 | 2000 | true

maka:

Slot 1 membutuhkan number
tetapi mendapat string

❌ Error.

Ini cara paling mudah memahami Tuple.

11. Tuple dan index

Karena Tuple sebenarnya direpresentasikan sebagai array saat runtime, kita tetap bisa menggunakan index.

Misalnya:

let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000,
    true
];

Kita bisa:

console.log(employee[0]);

hasil:

123

Kemudian:

console.log(employee[1]);

hasil:

John

Dan:

console.log(employee[2]);

hasil:

2000

Sedangkan:

console.log(employee[3]);

hasil:

true

12. TypeScript bahkan tahu tipe berdasarkan index

Ini salah satu hal menarik dari Tuple.

Misalnya:

let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000,
    true
];

TypeScript mengetahui:

employee[0]

adalah:

number

Sedangkan:

employee[1]

adalah:

string

Dan:

employee[2]

adalah:

number

Sedangkan:

employee[3]

adalah:

boolean

Jadi informasi tipe yang kita berikan pada Tuple sangat spesifik.

13. Tuple sebenarnya menjadi Array saat JavaScript dijalankan

Ini bagian yang penting untuk memahami hubungan TypeScript dan JavaScript.

Misalnya TypeScript:

let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000,
    true
];

Ketika TypeScript di-compile menjadi JavaScript, informasi Tuple tersebut tidak ada lagi sebagai konsep khusus.

JavaScript akan melihatnya sebagai array biasa:

let employee = [
    123,
    "John",
    2000,
    true
];

Jadi:

TypeScript
    ↓
Tuple

Compile
    ↓
JavaScript

    ↓
Array biasa

Lecture juga secara eksplisit menjelaskan bahwa Tuple TypeScript akan dikompilasi menjadi array JavaScript.

14. Jadi Tuple hanya ada saat Type Checking?

Secara sederhana, iya.

Tuple membantu developer dan TypeScript saat menulis kode.

TypeScript mengatakan:

“Saya ingin array ini memiliki struktur tertentu.”

Tetapi ketika program dijalankan oleh JavaScript, yang ada hanyalah:

[123, "John", 2000, true]

Jadi Tuple terutama memberikan type safety saat development/compile time.

15. Bagian yang sangat penting: push()

Nah, lecture memberikan sebuah exception yang sangat penting.

Tadi kita mengatakan:

Tuple memiliki fixed length.

Misalnya:

let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000,
    true
];

Kita sudah mempunyai 4 elemen.

Kalau kita melakukan assignment seperti:

employee = [
    123,
    "John",
    2000,
    true,
    500
];

TypeScript akan memberikan error.

Karena kita mencoba memberikan 5 elemen.

Tetapi…

Kalau kita menggunakan:

employee.push(500);

TypeScript pada contoh lecture tidak memberikan error.

Ini adalah pengecualian penting yang perlu diingat dari lecture.

16. Kenapa push() bisa lolos?

Karena Tuple pada akhirnya menggunakan operasi array JavaScript.

Method:

push()

adalah method milik Array.

Jadi:

employee.push(500);

dapat berjalan dan menambahkan elemen baru ke array saat runtime.

Akibatnya Tuple yang awalnya:

[123, "John", 2000, true]

bisa menjadi:

[123, "John", 2000, true, 500]

Padahal definisi Tuple-nya hanya memiliki empat posisi.

Lecture secara khusus memperingatkan bahwa push() menjadi pengecualian ini.

17. Ini penting: jangan salah menyimpulkan

Jangan berpikir:

“Tuple selalu 100% tidak bisa memiliki lebih dari jumlah elemennya.”

Lebih tepatnya:

TypeScript memperlakukan Tuple sebagai fixed-length ketika melakukan type checking tertentu, tetapi method seperti push() dapat menambahkan elemen karena Tuple tetap merupakan Array pada runtime.

Jadi:

employee = [123, "John", 2000, true, 500];

❌ TypeScript error.

Tetapi:

employee.push(500);

Lecture menunjukkan:

✅ tidak error.

Ini merupakan keterbatasan/pengecualian yang harus kita ingat ketika menggunakan Tuple.

18. Kalau assignment jumlah elemennya kurang?

Misalnya:

let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000
];

❌ Error.

Kenapa?

Karena Tuple membutuhkan empat elemen:

1. number
2. string
3. number
4. boolean

Tetapi kita hanya memberikan tiga:

1. number
2. string
3. number

Jadi kurang satu.

Lecture juga memberikan contoh bahwa source dengan hanya tiga elemen tidak dapat digunakan untuk target Tuple yang membutuhkan empat elemen.

19. Kalau jumlahnya tepat tetapi tipenya salah?

Misalnya:

let employee: [number, string, number, boolean] = [
    123,
    "John",
    "2000",
    true
];

Jumlahnya memang 4.

Tetapi posisi ketiga seharusnya:

number

sedangkan kita memberikan:

"2000"

yang merupakan:

string

Jadi tetap:

❌ Error.

Jadi ada dua hal yang harus cocok:

1. Jumlah elemen
2. Tipe setiap posisi

20. Array vs Tuple secara visual

Ini mungkin cara paling gampang untuk membedakannya.

Array

let values: (string | number)[] = [
    "John",
    123,
    "Hello",
    456
];

Aturannya:

Boleh string
Boleh number
Jumlah elemen tidak ditentukan
Urutan tipe tidak ditentukan

Tuple

let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000,
    true
];

Aturannya:

Harus 4 elemen
Posisi 0 → number
Posisi 1 → string
Posisi 2 → number
Posisi 3 → boolean

21. Kapan menggunakan Array?

Gunakan Array ketika kita mempunyai kumpulan data yang jenis elemennya relatif sama dan jumlahnya fleksibel.

Contohnya daftar nama:

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

Jumlahnya bisa:

1
5
100
1000

dan semuanya tetap string.

Contoh lain:

let scores: number[] = [
    80,
    90,
    75,
    88
];

Tidak masalah berapa banyak nilainya.

22. Kapan menggunakan Tuple?

Gunakan Tuple ketika sebuah kumpulan data memiliki format/struktur yang sudah pasti.

Misalnya data employee:

[number, string, number, boolean]

Formatnya:

ID
↓
number

Name
↓
string

Salary
↓
number

Permanent?
↓
boolean

Contohnya:

[123, "John", 2000, true]

Di sini urutan sangat penting.

23. Contoh lain Tuple: koordinat

Misalnya koordinat:

[x, y]

Kita bisa membuat:

let point: [number, number] = [10, 20];

Artinya:

index 0 → number
index 1 → number

Harus dua elemen.

let point: [number, number] = [10, 20];

✅

Sedangkan:

let point: [number, number] = [10];

❌ Kurang elemen.

Dan:

let point: [number, number] = [10, "20"];

❌ Posisi kedua harus number.

24. Contoh Tuple untuk response sederhana

Misalnya kita ingin menyimpan:

status code
message

Kita bisa:

let response: [number, string] = [
    200,
    "Success"
];

Artinya:

index 0 → number
index 1 → string

Tidak boleh:

let response: [number, string] = [
    "200",
    "Success"
];

Karena "200" adalah string, bukan number.

25. Perbedaan Tuple dengan Object

Ini juga penting karena sebelumnya kita belajar Object.

Misalnya:

let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000,
    true
];

Kita harus tahu bahwa:

index 0 = ID
index 1 = name
index 2 = salary
index 3 = permanent

Developer harus mengingat urutannya.

Dengan object:

let employee = {
    id: 123,
    name: "John",
    salary: 2000,
    permanent: true
};

Kita bisa langsung melihat nama property:

employee.id
employee.name
employee.salary
employee.permanent

Jadi secara praktis:

Tuple
→ bergantung pada posisi

Object
→ bergantung pada nama property

Untuk data yang memiliki banyak field dan setiap field memiliki nama yang jelas, object biasanya lebih mudah dibaca. Tetapi lecture ini fokus pada kapan Tuple digunakan untuk struktur array yang ketat.

26. Kesalahan umum saat belajar Tuple

Ada beberapa hal yang sering membingungkan.

Kesalahan 1: Mengira Tuple sama dengan Array biasa

Tidak persis.

number[]

berarti:

Array berisi number.

Sedangkan:

[number, string]

berarti:

Posisi pertama number, posisi kedua string.

Kesalahan 2: Mengira urutan tidak penting

Justru urutan sangat penting.

[number, string]

berbeda dengan:

[string, number]

Contoh:

[123, "John"]

cocok dengan:

[number, string]

tetapi tidak cocok dengan:

[string, number]

Kesalahan 3: Mengira semua elemen harus memiliki tipe yang sama

Tidak.

Tuple justru bisa memiliki tipe berbeda:

[number, string, boolean]

Contohnya:

[123, "John", true]

Kesalahan 4: Mengira Tuple benar-benar immutable/fixed secara runtime

Ini yang berkaitan dengan push().

Tuple memberikan aturan fixed-length dalam type checking, tetapi push() pada contoh lecture tetap dapat menambahkan elemen.

27. Hubungan dengan lecture sebelumnya

Kalau kita susun materi yang sudah kita pelajari:

Data Types

Kita belajar:

string
number
boolean

Type Annotation

Kita belajar:

let age: number = 20;

Array

Kita belajar:

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

Union

Kita mulai mengenal:

string | number

Sekarang Tuple

Kita menggabungkan konsep type dengan posisi:

let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000,
    true
];

Jadi perkembangan konsepnya seperti ini:

number
   ↓
satu number

number[]
   ↓
array berisi number

[number, string]
   ↓
posisi 0 harus number
posisi 1 harus string

28. Cara mengingat Tuple

Gunakan kalimat ini:

Array bertanya: “Tipe apa yang boleh masuk?”

Sedangkan:

Tuple bertanya: “Di posisi ini harus tipe apa?”

Contohnya:

(string | number)[]

Artinya:

“Setiap elemen boleh string atau number.”

Sedangkan:

[number, string, number, boolean]

Artinya:

“Elemen pertama harus number, kedua string, ketiga number, keempat boolean.”

Ini adalah perbedaan paling fundamental.

29. Ringkasan dalam satu tabel

30. Kesimpulan

Jadi, Tuple adalah fitur TypeScript untuk membuat array yang lebih ketat.

Misalnya:

let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000,
    true
];

Kita sudah menetapkan:

Jumlah elemen = 4

index 0 → number
index 1 → string
index 2 → number
index 3 → boolean

Kalau jumlah atau tipe elemennya salah saat assignment, TypeScript akan memberikan error.

Namun ada satu pengecualian penting dari lecture:

employee.push(...)

masih bisa menambahkan elemen meskipun secara definisi Tuple kita sudah menentukan panjangnya. Jadi jangan menganggap Tuple sebagai array yang benar-benar tidak bisa berubah panjangnya pada runtime.

Inti yang perlu kamu hafalkan:

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

“Bebas berapa banyak, yang penting semuanya string.”

// Tuple
let employee: [number, string, number, boolean] = [
    123,
    "John",
    2000,
    true
];

“Harus mengikuti format: number → string → number → boolean.”

Jadi kalau Array adalah “kumpulan data”, Tuple bisa kita anggap sebagai “data dengan format/urutan yang sudah ditentukan”.