Masukkan Password
06 Tipe Objek dalam TypeScript
📘 Lecture — Object di TypeScript
1. Apa itu Object?
Sebelumnya kita sudah mengenal:
let name = "John";
let age = 30;
Keduanya adalah variable terpisah.
Kalau kita ingin menyimpan informasi seseorang secara bersamaan, kita bisa menggunakan object:
let person = {
name: "John",
age: 30
};
Object memiliki pasangan:
property → value
Jadi:
{
name: "John",
age: 30
}
berarti:
name → "John"
age → 30
Cara membuat object ini pada dasarnya sama seperti JavaScript.
2. Yang menarik: TypeScript memperhatikan struktur object
Misalnya kita punya:
let person = {
name: "John",
age: 30
};
TypeScript melihat object tersebut dan otomatis mengetahui bahwa bentuk person adalah kira-kira:
person
├── name → string
└── age → number
Jadi TypeScript bukan hanya mengetahui:
“
personadalah object.”
Tetapi juga mengetahui:
“
personadalah object yang mempunyainamebertipe string danagebertipe number.”
Ini merupakan bentuk type inference yang sebelumnya sudah kita pelajari.
3. TypeScript melakukan inference pada Object
Perhatikan:
let person = {
name: "John",
age: 30
};
TypeScript membaca:
name: "John"
↓
string
age: 30
↓
number
Sehingga secara konsep TypeScript mengetahui:
{
name: string;
age: number;
}
Kita tidak harus menulisnya secara manual.
4. Object harus mengikuti struktur yang sudah diketahui
Sekarang misalnya:
let person = {
name: "John",
age: 30
};
Kemudian kita mencoba memberikan object lain:
person = {
name: "Mark",
age: 32
};
Ini masih cocok.
Kenapa?
Karena strukturnya sama:
Object pertama:
name → string
age → number
Object kedua:
name → string
age → number
Jadi:
✅ cocok
Materi menunjukkan bahwa object baru yang memiliki name dan age masih sesuai dengan tipe yang telah diinfer TypeScript.
5. Bagaimana kalau kita tambahkan property baru?
Misalnya:
person = {
name: "Mark",
age: 32,
gender: "male"
};
Sekarang TypeScript memberikan error.
Kenapa?
Karena sebelumnya TypeScript mengetahui person memiliki struktur:
{
name: string;
age: number;
}
Tetapi sekarang kita memberikan:
{
name: string;
age: number;
gender: string;
}
Ada tambahan:
gender
yang sebelumnya tidak ada.
TypeScript akan mengatakan bahwa gender bukan property yang dikenal pada tipe object tersebut.
6. Analogi sederhana: formulir
Bayangkan TypeScript membuat formulir untuk person.
Formulirnya:
PERSON
Name : __________
Age : __________
Jadi TypeScript mengharapkan object dengan:
name
age
Kemudian kamu memberikan:
Name : Mark
Age : 32
Gender : Male
TypeScript bertanya:
“Gender apa? Saya tidak pernah mengatakan bahwa field ini ada.”
😄
Itulah gambaran sederhana dari error tersebut.
7. Bagaimana kalau dari awal ada gender?
Misalnya:
let person = {
name: "John",
age: 30,
gender: "male"
};
Sekarang TypeScript akan menginfer:
person
├── name → string
├── age → number
└── gender → string
Maka object berikut:
person = {
name: "Mark",
age: 32,
gender: "female"
};
tidak masalah karena strukturnya cocok.
8. Bagaimana kalau gender dihilangkan?
Misalnya TypeScript sudah mengetahui:
{
name: string;
age: number;
gender: string;
}
Lalu kita memberikan:
person = {
name: "Mark",
age: 32
};
Sekarang gender tidak ada.
Akibatnya struktur object tidak sesuai lagi.
Jadi error.
Ini menunjukkan bahwa pada type inference object, struktur property sangat penting.
9. Explicit Object Type
Sampai sini kita menggunakan type inference.
Tetapi kita juga bisa menentukan tipe object secara eksplisit.
Ada beberapa bentuk yang dibahas di lecture.
Misalnya:
let person: object;
Artinya kita memberi tahu:
personharus berupa object.
10. Type object terlalu umum
Misalnya:
let person: object;
person = {
name: "John",
age: 30,
gender: "male"
};
Boleh.
Kemudian:
person = {
name: "Mark",
age: 32
};
juga boleh.
Kenapa?
Karena kita hanya mengatakan:
person: object
Kita tidak menentukan property apa saja yang harus ada.
Jadi berbagai bentuk object dapat diterima. Materi menunjukkan bahwa object yang ditulis secara umum tidak mendeskripsikan property-property di dalamnya.
11. {} juga sangat umum
Kita juga bisa menulis:
let person: {};
Pada konteks lecture ini, ini juga tidak menjelaskan property apa saja yang harus dimiliki object.
Jadi kalau tujuan kita adalah membuat object dengan struktur tertentu, ini bukan cara yang paling informatif.
12. Cara yang lebih bagus: tentukan struktur object
Misalnya kita ingin person wajib memiliki:
name → string
age → number
Kita bisa menulis:
let person: {
name: string;
age: number;
};
Sekarang TypeScript mengetahui dengan jelas:
person
├── name → harus string
└── age → harus number
Ini jauh lebih spesifik daripada:
let person: object;
13. Memberikan value sesuai struktur
Contoh:
let person: {
name: string;
age: number;
} = {
name: "John",
age: 30
};
Ini benar.
Karena:
name → "John" → string ✅
age → 30 → number ✅
Strukturnya cocok.
14. Kalau property tambahan diberikan?
Misalnya:
let person: {
name: string;
age: number;
} = {
name: "John",
age: 30,
gender: "male"
};
TypeScript akan mempermasalahkan gender.
Kenapa?
Karena kita sudah mengatakan secara eksplisit:
{
name: string;
age: number;
}
Artinya struktur yang kita tentukan hanya mengenal name dan age.
Materi memperlihatkan bahwa property tambahan seperti gender menyebabkan error ketika object diberikan kepada tipe object yang strukturnya sudah ditentukan.
15. Bukan hanya nama property yang penting
Ini juga sangat penting.
Misalnya:
let person: {
name: string;
age: number;
} = {
name: "John",
age: "30"
};
❌ Error.
Kenapa?
Karena:
name → string ✅
age → string ❌
Padahal kita sudah menentukan:
age → number
Jadi:
age: 30
✅ benar.
Sedangkan:
age: "30"
❌ salah.
Materi secara eksplisit menunjukkan bahwa nama property dan tipe value property sama-sama harus sesuai.
16. Ingat perbedaan 30 dan "30"
Ini sering membuat pemula bingung.
30
adalah:
number
Sedangkan:
"30"
adalah:
string
Walaupun secara tampilan sama-sama menunjukkan angka 30.
Jadi:
let person: {
age: number;
};
harus:
{
age: 30
}
bukan:
{
age: "30"
}
17. Type Inference Object vs Explicit Type
Sekarang bandingkan dua cara.
Type inference
let person = {
name: "John",
age: 30
};
TypeScript otomatis mengetahui:
{
name: string;
age: number;
}
Explicit type
let person: {
name: string;
age: number;
} = {
name: "John",
age: 30
};
Di sini kita sendiri yang menentukan strukturnya.
Jadi konsepnya sama seperti lecture sebelumnya.
18. Mengakses property object
Setelah kita memiliki:
let person = {
name: "John",
age: 30
};
Kita bisa mengambil name:
console.log(person.name);
Hasil:
John
Karena name memang ada di object.
Materi menunjukkan bahwa property yang diketahui oleh TypeScript dapat diakses secara normal.
19. Bagaimana kalau mengakses property yang tidak ada?
Misalnya:
console.log(person.gender);
Padahal object kita hanya:
{
name: "John",
age: 30
}
Tidak ada:
gender
TypeScript akan memberikan error:
Property 'gender' does not exist...
Artinya:
“Saya tidak menemukan property
genderpada tipe objectperson.”
Ini salah satu manfaat penting TypeScript.
20. Bagaimana JavaScript?
Di JavaScript:
console.log(person.gender);
Jika gender tidak ada, JavaScript tidak memberikan error hanya karena property tersebut tidak ditemukan.
Nilainya akan menjadi:
undefined
Jadi perbedaannya secara sederhana:
JavaScript
person.gender
→ undefined
TypeScript
person.gender
→ TypeScript memberi tahu kita bahwa property tersebut tidak ada pada tipe object.
Materi membandingkan perilaku ini secara langsung.
21. Kenapa ini berguna?
Bayangkan object yang sangat besar:
const user = {
name: "John",
age: 30,
email: "john@example.com"
};
Kemudian kita salah mengetik:
console.log(user.emial);
Padahal seharusnya:
user.email
JavaScript bisa menghasilkan undefined.
TypeScript dapat membantu mendeteksi:
emial ❌
email ✅
Jadi typo seperti ini bisa ditemukan lebih awal.
22. Ada hal menarik tentang person: object
Misalnya:
let person: object = {
name: "John",
age: 30
};
Sekarang kita mengatakan:
personadalah object.
Tetapi TypeScript tidak tahu secara spesifik bahwa object tersebut mempunyai:
name
age
Karena tipe yang kita berikan hanya:
object
Akibatnya:
person.name
juga bisa menghasilkan error dari TypeScript.
Kenapa?
Karena dari sudut pandang TypeScript, kita hanya mengatakan:
“Ini sebuah object.”
Bukan:
“Ini object yang memiliki property
namebertipe string.”
Materi menjelaskan persis masalah ini: tipe object tidak memberi informasi tentang property apa saja yang dimiliki object.
23. Jadi jangan salah memahami object
Ada perbedaan:
let person: object;
dan:
let person: {
name: string;
age: number;
};
Yang pertama hanya mengatakan:
person adalah object
Yang kedua mengatakan:
person adalah object
dan HARUS punya:
name → string
age → number
Yang kedua jauh lebih informatif.
24. Square Bracket Notation
Di JavaScript kita juga bisa mengakses property seperti ini:
person["age"]
Selain:
person.age
Keduanya bisa digunakan di TypeScript.
Misalnya:
console.log(person.name);
console.log(person["age"]);
Hasilnya:
John
30
Materi menunjukkan bahwa square bracket notation juga dapat digunakan di TypeScript.
25. Dot notation vs bracket notation
Ada dua cara:
Dot notation
person.name
Bracket notation
person["name"]
Untuk kasus sederhana, biasanya kamu akan sering melihat:
person.name
Tetapi:
person["name"]
juga valid.
26. Sekarang bagian yang lebih penting: Nested Object
Sekarang kita punya object:
let person = {
name: "John",
age: 30,
address: {
city: "London",
country: "UK"
}
};
Di sini terdapat object di dalam object.
Strukturnya:
person
│
├── name
│
├── age
│
└── address
│
├── city
│
└── country
Object address disebut nested object dalam konteks materi.
27. Type-nya bagaimana?
Kita bisa mendeskripsikan tipe object tersebut seperti ini:
let person: {
name: string;
age: number;
address: {
city: string;
country: string;
};
};
Perhatikan struktur kurung kurawalnya.
Bagian luar:
{
name: string;
age: number;
address: ...
}
Kemudian address sendiri mempunyai object:
{
city: string;
country: string;
}
Materi menunjukkan bahwa nested object juga dapat diberi type secara eksplisit menggunakan struktur object di dalam property tersebut.
28. Visualisasi nested object
Supaya lebih gampang:
person
│
├── name: string
│
├── age: number
│
└── address: object
│
├── city: string
│
└── country: string
Atau kalau dibuat seperti kode:
{
name: string;
age: number;
address: {
city: string;
country: string;
};
}
29. Contoh lengkap
let person: {
name: string;
age: number;
address: {
city: string;
country: string;
};
} = {
name: "John",
age: 30,
address: {
city: "London",
country: "UK"
}
};
Sekarang TypeScript mengetahui seluruh struktur:
person.name
→ string
person.age
→ number
person.address
→ object
person.address.city
→ string
person.address.country
→ string
Jadi TypeScript bukan hanya mengetahui tipe object utama, tetapi juga struktur object yang ada di dalamnya.
30. Kenapa harus ada ;?
Perhatikan:
let person: {
name: string;
age: number;
address: {
city: string;
country: string;
};
}
Di dalam object type kita menggunakan:
name: string;
age: number;
Tanda ; digunakan untuk memisahkan deklarasi property dalam type tersebut.
Ini berbeda dari object value:
{
name: "John",
age: 30
}
yang menggunakan koma.
Jadi secara sederhana:
Object value
{
name: "John",
age: 30
}
Object type
{
name: string;
age: number;
}
31. Cara berpikir paling penting
Mulai sekarang kalau melihat:
let person = {
name: "John",
age: 30
};
jangan hanya berpikir:
“Ini object.”
Biasakan berpikir:
“Ini object yang memiliki struktur tertentu.”
Yaitu:
person
├── name → string
└── age → number
Itulah yang diperiksa TypeScript.
32. Hubungannya dengan Lecture sebelumnya
Ini sebenarnya lanjutan langsung dari Type Inference.
Lecture sebelumnya:
let age = 20;
TypeScript menyimpulkan:
age → number
Sekarang:
let person = {
name: "John",
age: 30
};
TypeScript juga melakukan inference:
person
├── name → string
└── age → number
Jadi type inference bukan hanya untuk variable sederhana.
TypeScript juga bisa melakukan inference terhadap struktur object.
33. Kesalahan penting yang perlu kamu pahami
Misalnya:
let person = {
name: "John",
age: 30
};
Kemudian:
person = {
name: "Mark",
age: "32"
};
❌ Error.
Bukan karena name salah.
Tetapi karena:
age yang diharapkan → number
age yang diberikan → string
Jadi:
age: 32
✅
sedangkan:
age: "32"
❌
34. Kesimpulan besar Lecture ini
Ada 5 hal utama yang harus kamu kuasai.
① Object memiliki property
const person = {
name: "John",
age: 30
};
② TypeScript melakukan type inference terhadap object
const person = {
name: "John",
age: 30
};
dipahami sebagai:
name → string
age → number
③ Kita bisa menentukan object type secara eksplisit
const person: {
name: string;
age: number;
} = {
name: "John",
age: 30
};
④ TypeScript memeriksa property
person.gender
akan bermasalah jika gender tidak ada dalam tipe object.
⑤ Nested object juga bisa diberi type
const person: {
name: string;
age: number;
address: {
city: string;
country: string;
};
} = {
name: "John",
age: 30,
address: {
city: "London",
country: "UK"
}
};
🧠 Cheat Sheet
// Object dengan inference
let person = {
name: "John",
age: 30
};
TypeScript tahu:
name → string
age → number
// Explicit object type
let person: {
name: string;
age: number;
} = {
name: "John",
age: 30
};
// Nested object
let person: {
name: string;
age: number;
address: {
city: string;
country: string;
};
} = {
name: "John",
age: 30,
address: {
city: "London",
country: "UK"
}
};
⭐ Inti yang harus benar-benar kamu pahami
Kalau Lecture 5 kemarin intinya adalah:
“Variable punya tipe.”
Maka lecture ini menambahkan:
“Object juga punya struktur dan TypeScript bisa mengetahui serta memeriksa struktur tersebut.”
Misalnya:
let person = {
name: "John",
age: 30
};
TypeScript tidak sekadar berpikir:
person = object
Tetapi lebih spesifik:
person
│
├── name → string
└── age → number
Inilah fondasi penting sebelum nanti masuk ke type, interface, dan object yang lebih kompleks.