M

MLOG

Bahasa Indonesia

Panduan lengkap TypeScript Interface dan Type, membahas perbedaan, kasus penggunaan, dan praktik terbaik untuk aplikasi global yang mudah dipelihara dan skalabel.

TypeScript Interface vs Type: Praktik Terbaik Deklarasi untuk Pengembang Global

TypeScript, superset dari JavaScript, memberdayakan pengembang di seluruh dunia untuk membangun aplikasi yang kuat dan skalabel melalui pengetikan statis. Dua konstruksi fundamental untuk mendefinisikan tipe adalah Interface dan Type. Meskipun keduanya memiliki kesamaan, memahami nuansa dan kasus penggunaan yang tepat sangat penting untuk menulis kode yang bersih, mudah dipelihara, dan efisien. Panduan komprehensif ini akan mendalami perbedaan antara TypeScript Interface dan Type, serta menjelajahi praktik terbaik untuk memanfaatkannya secara efektif dalam proyek Anda.

Memahami TypeScript Interface

Sebuah Interface dalam TypeScript adalah cara yang kuat untuk mendefinisikan kontrak untuk sebuah objek. Interface menguraikan bentuk sebuah objek, menentukan properti yang harus dimilikinya, tipe datanya, dan secara opsional, metode apa pun yang harus diimplementasikan. Interface utamanya mendeskripsikan struktur objek.

Sintaks dan Contoh Interface

Sintaks untuk mendefinisikan sebuah interface cukup sederhana:


interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

const user: User = {
  id: 123,
  name: "Alice Smith",
  email: "alice.smith@example.com",
  isActive: true,
};

Dalam contoh ini, interface User mendefinisikan struktur objek pengguna. Setiap objek yang ditetapkan ke variabel user harus mematuhi struktur ini; jika tidak, kompiler TypeScript akan memunculkan error.

Fitur Utama dari Interface

Contoh Penggabungan Deklarasi


interface Window {
  title: string;
}

interface Window {
  height: number;
  width: number;
}

const myWindow: Window = {
  title: "My Application",
  height: 800,
  width: 600,
};

Di sini, interface Window dideklarasikan dua kali. TypeScript menggabungkan deklarasi-deklarasi ini, secara efektif menciptakan sebuah interface dengan properti title, height, dan width.

Menjelajahi TypeScript Type

Sebuah Type dalam TypeScript menyediakan cara untuk mendefinisikan bentuk data. Berbeda dengan interface, type lebih serbaguna dan dapat merepresentasikan rentang struktur data yang lebih luas, termasuk tipe primitif, union, intersection, dan tuple.

Sintaks dan Contoh Type

Sintaks untuk mendefinisikan alias type adalah sebagai berikut:


type Point = {
  x: number;
  y: number;
};

const origin: Point = {
  x: 0,
  y: 0,
};

Dalam contoh ini, type Point mendefinisikan struktur objek titik dengan koordinat x dan y.

Fitur Utama dari Type

Contoh Union Type


type Result = {
  success: true;
  data: any;
} | {
  success: false;
  error: string;
};

const successResult: Result = {
  success: true,
  data: { message: "Operation successful!" },
};

const errorResult: Result = {
  success: false,
  error: "An error occurred.",
};

Type Result adalah union type yang bisa berupa keberhasilan dengan data atau kegagalan dengan pesan error. Ini berguna untuk merepresentasikan hasil dari operasi yang mungkin berhasil atau gagal.

Contoh Intersection Type


type Person = {
  name: string;
  age: number;
};

type Employee = {
  employeeId: string;
  department: string;
};

type EmployeePerson = Person & Employee;

const employee: EmployeePerson = {
  name: "Bob Johnson",
  age: 35,
  employeeId: "EMP123",
  department: "Engineering",
};

Type EmployeePerson adalah intersection type, yang menggabungkan properti dari Person dan Employee. Ini memungkinkan Anda untuk membuat tipe baru dengan menggabungkan tipe yang sudah ada.

Perbedaan Utama: Interface vs Type

Meskipun interface dan type sama-sama berfungsi untuk mendefinisikan struktur data di TypeScript, ada perbedaan utama yang memengaruhi kapan harus menggunakan satu di antara yang lain:

  1. Penggabungan Deklarasi (Declaration Merging): Interface mendukung penggabungan deklarasi, sedangkan type tidak. Jika Anda perlu memperluas definisi tipe di beberapa file atau modul, interface umumnya lebih disukai.
  2. Union Type: Type dapat merepresentasikan union type, sedangkan interface tidak dapat secara langsung mendefinisikan union. Jika Anda perlu mendefinisikan tipe yang bisa menjadi salah satu dari beberapa tipe yang berbeda, gunakan alias type.
  3. Intersection Type: Type dapat membuat intersection type menggunakan operator &. Interface dapat memperluas interface lain, mencapai efek yang serupa, tetapi intersection type menawarkan fleksibilitas yang lebih besar.
  4. Tipe Primitif: Type dapat secara langsung merepresentasikan tipe primitif (string, number, boolean), sedangkan interface utamanya dirancang untuk mendefinisikan bentuk objek.
  5. Pesan Error: Beberapa pengembang merasa bahwa interface menawarkan pesan error yang sedikit lebih jelas dibandingkan dengan type, terutama saat berurusan dengan struktur tipe yang kompleks.

Praktik Terbaik: Memilih Antara Interface dan Type

Memilih antara interface dan type tergantung pada kebutuhan spesifik proyek Anda dan preferensi pribadi Anda. Berikut adalah beberapa panduan umum untuk dipertimbangkan:

Contoh Praktis: Skenario Aplikasi Global

Mari kita pertimbangkan beberapa contoh praktis untuk mengilustrasikan bagaimana interface dan type dapat digunakan dalam aplikasi global:

1. Manajemen Profil Pengguna (Internasionalisasi)

Misalkan Anda sedang membangun sistem manajemen profil pengguna yang mendukung berbagai bahasa. Anda dapat menggunakan interface untuk mendefinisikan struktur profil pengguna dan type untuk merepresentasikan kode bahasa yang berbeda:


interface UserProfile {
  id: number;
  name: string;
  email: string;
  preferredLanguage: LanguageCode;
  address: Address;
}

interface Address {
    street: string;
    city: string;
    country: string;
    postalCode: string;
}

type LanguageCode = "en" | "fr" | "es" | "de" | "zh"; // Contoh kode bahasa

const userProfile: UserProfile = {
  id: 1,
  name: "John Doe",
  email: "john.doe@example.com",
  preferredLanguage: "en",
  address: { street: "123 Main St", city: "Anytown", country: "USA", postalCode: "12345" }
};

Di sini, interface UserProfile mendefinisikan struktur profil pengguna, termasuk bahasa pilihan mereka. Type LanguageCode adalah union type yang merepresentasikan bahasa yang didukung. Interface Address mendefinisikan format alamat, dengan asumsi format global yang generik.

2. Konversi Mata Uang (Globalisasi)

Pertimbangkan aplikasi konversi mata uang yang perlu menangani berbagai mata uang dan nilai tukar. Anda dapat menggunakan interface untuk mendefinisikan struktur objek mata uang dan type untuk merepresentasikan kode mata uang:


interface Currency {
  code: CurrencyCode;
  name: string;
  symbol: string;
}

interface ExchangeRate {
  baseCurrency: CurrencyCode;
  targetCurrency: CurrencyCode;
  rate: number;
}


type CurrencyCode = "USD" | "EUR" | "GBP" | "JPY" | "CAD"; // Contoh kode mata uang

const usd: Currency = {
  code: "USD",
  name: "United States Dollar",
  symbol: "$",
};

const exchangeRate: ExchangeRate = {
  baseCurrency: "USD",
  targetCurrency: "EUR",
  rate: 0.85,
};

Interface Currency mendefinisikan struktur objek mata uang, termasuk kode, nama, dan simbolnya. Type CurrencyCode adalah union type yang merepresentasikan kode mata uang yang didukung. Interface ExchangeRate digunakan untuk merepresentasikan nilai konversi antara mata uang yang berbeda.

3. Validasi Data (Format Internasional)

Saat menangani input data dari pengguna di berbagai negara, penting untuk memvalidasi data sesuai dengan format internasional yang benar. Sebagai contoh, nomor telepon memiliki format yang berbeda berdasarkan kode negara. Type dapat digunakan untuk merepresentasikan variasi tersebut.


type PhoneNumber = {
  countryCode: string;
  number: string;
  isValid: boolean; // Tambahkan boolean untuk merepresentasikan data valid/tidak valid.
};

interface Contact {
   name: string;
   phoneNumber: PhoneNumber;
   email: string;
}


function validatePhoneNumber(phoneNumber: string, countryCode: string): PhoneNumber {
  // Logika validasi berdasarkan countryCode (misalnya, menggunakan pustaka seperti libphonenumber-js)
  // ... Implementasi di sini untuk memvalidasi nomor.
  const isValid = true; //placeholder

  return { countryCode, number: phoneNumber, isValid };
}

const contact: Contact = {
    name: "Jane Doe",
    phoneNumber: validatePhoneNumber("555-123-4567", "US"), //contoh
    email: "jane.doe@email.com",
};


console.log(contact.phoneNumber.isValid); //output pemeriksaan validasi.

Kesimpulan: Menguasai Deklarasi TypeScript

TypeScript Interface dan Type adalah alat yang kuat untuk mendefinisikan struktur data dan meningkatkan kualitas kode. Memahami perbedaannya dan memanfaatkannya secara efektif sangat penting untuk membangun aplikasi yang kuat, mudah dipelihara, dan skalabel. Dengan mengikuti praktik terbaik yang diuraikan dalam panduan ini, Anda dapat membuat keputusan yang tepat tentang kapan harus menggunakan interface dan type, yang pada akhirnya akan meningkatkan alur kerja pengembangan TypeScript Anda dan berkontribusi pada kesuksesan proyek Anda.

Ingatlah bahwa pilihan antara interface dan type sering kali merupakan masalah preferensi pribadi dan persyaratan proyek. Bereksperimenlah dengan kedua pendekatan untuk menemukan apa yang paling cocok untuk Anda dan tim Anda. Merangkul kekuatan sistem tipe TypeScript tidak diragukan lagi akan menghasilkan kode yang lebih andal dan mudah dipelihara, yang bermanfaat bagi pengembang di seluruh dunia.