TypeScript - Objek: Panduan untuk Pemula

Hai sana, super bintang coding masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia objek TypeScript. Jangan khawatir jika Anda belum pernah mengoding sebelumnya – saya akan menjadi panduan ramah Anda, dan kita akan mengambil langkah ini secara bertahap. Pada akhir tutorial ini, Anda akan dapat bekerja dengan objek seperti seorang ahli!

Apa Itu Objek?

Sebelum kita masuk ke detil khusus TypeScript, mari bicarakan apa itu objek dalam pemrograman. Bayangkan Anda memiliki sebuah tas punggung. Tas punggung ini dapat menampung berbagai macam item, masing-masing dengan karakteristiknya sendiri. Dalam pemrograman, objek seperti tas punggung itu – itu adalah wadah yang dapat menampung berbagai informasi yang terkait.

Sintaks: Bagaimana Membuat Objek di TypeScript

mari mulai dari dasar. Dalam TypeScript, kita dapat membuat objek menggunakan yang disebut "notasi literal objek". Itu adalah istilah yang keren, tapi sebenarnya sangat sederhana. Mari lihat contohnya:

let myBackpack = {
color: "blue",
capacity: 20,
isWaterproof: true
};

Dalam contoh ini, myBackpack adalah objek kita. Itu memiliki tiga properti: color, capacity, dan isWaterproof. Setiap properti memiliki nilai yang ditugaskan kepadanya.

Anotasi Tipe: Memberitahu TypeScript apa yang Diharapkan

Salah satu hal menarik tentang TypeScript adalah kita dapat memberitahu secara tepat jenis data yang kita harapkan objek kita akan berisi. Ini disebut "anotasi tipe". Mari tingkatkan contoh tas punggung kita:

let myBackpack: {
color: string;
capacity: number;
isWaterproof: boolean;
} = {
color: "blue",
capacity: 20,
isWaterproof: true
};

Di sini, kita memberitahu TypeScript bahwa color selalu harus string, capacity selalu harus number, dan isWaterproof selalu harus boolean. Ini membantu menangkap kesalahan awal dan membuat kode kita lebih dapat dipercaya.

Notasi Literal Objek: Peninjauan Lebih Detil

Kita sudah melihat notasi literal objek dalam aksi, tapi mari kitaura lebih lanjut. Sintaks mengikuti pola ini:

let objectName = {
property1: value1,
property2: value2,
// ... dan seterusnya
};

Setiap properti dipisahkan oleh koma, dan seluruh objek diapit oleh kurung kurawal {}. Itu seperti memasukkan item ke tas punggung kita, dengan setiap item memiliki nama (properti) dan deskripsi (nilai).

Template Tipe TypeScript: Objek Reusable

kadang-kadang, kita ingin membuat beberapa objek dengan struktur yang sama. Itu di mana template tipe TypeScript sangat berguna. Kita dapat menentukan tipe sekali dan menggunakannya berkali-kali:

type Backpack = {
color: string;
capacity: number;
isWaterproof: boolean;
};

let myBackpack: Backpack = {
color: "blue",
capacity: 20,
isWaterproof: true
};

let friendsBackpack: Backpack = {
color: "red",
capacity: 15,
isWaterproof: false
};

Tipe Backpack ini berperan seperti blueprint, memastikan bahwa setiap objek tipe Backpack memiliki struktur yang benar.

Objek sebagai Parameter Fungsi: Menyampaikan Tas Punggung Kita

Objek dapat disampaikan ke fungsi, memungkinkan kita untuk bekerja dengan struktur data kompleks. Mari lihat contohnya:

function describeBackpack(backpack: Backpack): string {
return `This ${backpack.color} backpack has a capacity of ${backpack.capacity} liters and is ${backpack.isWaterproof ? "waterproof" : "not waterproof"}.`;
}

console.log(describeBackpack(myBackpack));
// Output: This blue backpack has a capacity of 20 liters and is waterproof.

Dalam fungsi ini, kita menyampaikan objek Backpack dan menggunakan propertinya untuk membuat deskripsi.

Objek Anonim: Tas Punggung Tanpa Nama

Kadang-kadang, kita perlu membuat objek di tempat tanpa mengassignnya ke variabel. Ini disebut objek anonim:

function printBackpackColor(backpack: { color: string }): void {
console.log(`The backpack is ${backpack.color}.`);
}

printBackpackColor({ color: "green" });
// Output: The backpack is green.

Di sini, kita membuat objek langsung dalam panggilan fungsi. Itu seperti mendeskripsikan tas punggung kepada seseorang tanpa sebenarnya memiliki tas punggung itu.

Duck-typing: Jika Itu Menyerupai Bebek...

TypeScript menggunakan konsep "duck-typing". Ide nya adalah: jika itu menyerupai bebek dan berbisik seperti bebek, itu mungkin adalah bebek. Dalam istilah TypeScript, ini berarti bentuk objek lebih penting daripada tipe eksplicit nya:

interface Bag {
color: string;
carry(): void;
}

let myBackpack = {
color: "purple",
capacity: 25,
carry: function() { console.log("Carrying the backpack"); }
};

function useBag(bag: Bag) {
console.log(`Using a ${bag.color} bag`);
bag.carry();
}

useBag(myBackpack); // Ini bekerja!

Meskipun myBackpack tidak dideklarasikan secara eksplisit sebagai Bag, itu memiliki semua properti dan metode yang seharusnya dimiliki oleh Bag, jadi TypeScript mengijinkannya.

Menutup Perjalanan Tas Punggung Kita

Selamat! Anda baru saja memasukkan pengetahuan pertama Anda ke tas punggung objek TypeScript. Ingat, objek sangat kuat dalam pemrograman – mereka memungkinkan kita untuk mengelompokkan data dan fungsionalitas yang terkait bersamaan, seperti tas punggung nyata yang menjaga semua peralatan hiking Anda di satu tempat.

Sekiranya Anda terus menjalankan perjalanan coding Anda, Anda akan menemukan objek di mana-mana. Mereka adalah blok bangunan aplikasi kompleks, dari daftar tugas sederhana hingga aplikasi web tingkat tinggi. Terus latihan, dan segera Anda akan dapat membuat dan memanipulasi objek dengan mudah!

Berikut adalah tabel rujukan cepat metode yang kita pelajari:

Metode	Deskripsi
Notasi Literal Objek	Membuat objek menggunakan {} sintaks
Anotasi Tipe	Menentukan struktur objek
Template Tipe	Membuat tipe objek yang dapat digunakan berkali-kali
Objek sebagai Parameter Fungsi	Menyampaikan objek ke fungsi
Objek Anonim	Membuat objek tanpa mengassign ke variabel
Duck-typing	Pemeriksaan tipe berdasarkan bentuk objek

Hati-hati coding, dan semoga objek TypeScript Anda selalu bebas dari bug dan penuh dengan properti menarik!

Credits: Image by storyset