Objek TypeScript Dibuat Sederhana untuk Pemula

Objek merupakan bagian mendasar dari JavaScript dan TypeScript. Objek memungkinkan Anda mengelompokkan data dan fungsi terkait bersama-sama, menyediakan cara untuk memodelkan entitas dunia nyata dalam kode Anda. TypeScript menyempurnakan objek JavaScript dengan keamanan tipe, membuat kode Anda lebih mudah diprediksi dan dikelola. Panduan ini akan menyederhanakan konsep objek TypeScript untuk pemula.

Apa itu Objek dalam TypeScript?

objek adalah kumpulan pasangan kunci-nilai, di mana kuncinya adalah string (atau Simbol) dan nilainya dapat berupa jenis apa pun. Dalam TypeScript, Anda dapat menentukan bentuk objek menggunakan tipe atau antarmuka, memastikan bahwa objek tersebut mengikuti struktur tertentu.

Mendefinisikan Objek Sederhana dalam TypeScript

Mari kita mulai dengan mendefinisikan objek sederhana di TypeScript. Ini mirip dengan cara Anda mendefinisikan objek di JavaScript tetapi dengan manfaat tambahan berupa keamanan tipe.

Contoh Objek Dasar

Berikut cara mendefinisikan objek sederhana dalam TypeScript:

const person: { name: string; age: number } = {
  name: "Alice",
  age: 25
};

console.log(person.name); // Output: Alice
console.log(person.age);  // Output: 25

Dalam contoh ini, objek person memiliki dua properti: name (bertipe string) dan age (bertipe number). TypeScript akan memastikan bahwa objek tersebut mematuhi struktur ini.

Menggunakan Antarmuka untuk Menentukan Struktur Objek

interface adalah fitur hebat dalam TypeScript yang menentukan bentuk suatu objek. Antarmuka menyediakan cara untuk menentukan kontrak dalam kode Anda, memastikan bahwa objek mematuhi struktur tertentu.

Mendefinisikan Antarmuka

Berikut cara menggunakan antarmuka untuk menentukan struktur suatu objek:

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Bob",
  age: 30
};

console.log(person.name); // Output: Bob
console.log(person.age);  // Output: 30

Dalam contoh ini, antarmuka Person mendefinisikan struktur objek orang. Variabel person harus mematuhi struktur ini, atau TypeScript akan memunculkan kesalahan.

Properti Opsional dalam Objek

TypeScript memungkinkan Anda untuk menentukan properti opsional dalam objek menggunakan simbol ?. Properti opsional dapat dihilangkan saat membuat objek, sehingga memberikan fleksibilitas dalam cara Anda menentukan struktur objek.

Contoh dengan Properti Opsional

Berikut ini contoh di mana properti phoneNumber bersifat opsional:

interface Employee {
  name: string;
  age: number;
  phoneNumber?: string; // Optional property
}

const employee1: Employee = {
  name: "John",
  age: 28
};

const employee2: Employee = {
  name: "Doe",
  age: 32,
  phoneNumber: "123-456-7890"
};

console.log(employee1.phoneNumber); // Output: undefined
console.log(employee2.phoneNumber); // Output: 123-456-7890

Dalam contoh ini, employee1 tidak memiliki properti phoneNumber, sedangkan employee2 memilikinya. Keduanya valid menurut antarmuka Employee.

Properti Hanya Baca dalam Objek

TypeScript memungkinkan Anda membuat properti readonly, mencegah properti tersebut dimodifikasi setelah objek dibuat. Ini berguna untuk membuat objek yang tidak dapat diubah.

Contoh dengan Properti Hanya Baca

Berikut cara menentukan properti hanya-baca:

interface Car {
  readonly brand: string;
  model: string;
}

const car: Car = {
  brand: "Toyota",
  model: "Camry"
};

// car.brand = "Honda"; // Error: Cannot assign to 'brand' because it is a read-only property

car.model = "Corolla"; // Valid
console.log(car.model); // Output: Corolla

Dalam contoh ini, properti brand ditandai sebagai readonly. Segala upaya untuk mengubahnya akan mengakibatkan kesalahan saat kompilasi.

Objek Bersarang di TypeScript

Objek TypeScript dapat disarangkan, artinya suatu objek dapat memuat objek lain sebagai properti. Hal ini umum terjadi dalam struktur data yang kompleks.

Contoh Objek Bersarang

Berikut ini adalah contoh objek bersarang:

interface Address {
  street: string;
  city: string;
  zipCode: string;
}

interface User {
  name: string;
  age: number;
  address: Address; // Nested object
}

const user: User = {
  name: "Emily",
  age: 27,
  address: {
    street: "123 Main St",
    city: "New York",
    zipCode: "10001"
  }
};

console.log(user.address.city); // Output: New York

Dalam contoh ini, antarmuka User memiliki objek Address yang bertingkat. Objek user mengikuti struktur ini, yang memungkinkan akses ke properti bertingkat.

Kesimpulan

Objek dalam TypeScript lebih kuat dan fleksibel daripada objek JavaScript biasa karena definisi tipe, properti opsional, properti hanya baca, dan struktur bertingkat. Dengan mendefinisikan objek menggunakan antarmuka, Anda dapat membuat kode yang lebih kuat dan bebas kesalahan. Mulailah menggunakan objek TypeScript dalam proyek Anda untuk memanfaatkan sepenuhnya keamanan tipe dan data terstruktur.