Interface Generik

Termasuk bagian Pengantar TypeScript dalam perjalanan JavaScript di Coddy. Pelajaran 61 dari 73.

Sama seperti kamu dapat membuat fungsi generik, kamu juga dapat membuat interface generik. Ini memungkinkan kamu menentukan bentuk object sambil menjaga tipe property tertentu tetap fleksibel dan dapat digunakan kembali.

Berikut cara membuat interface generik menggunakan sintaks parameter tipe yang sama:

interface Container<T> {
  value: T;
  isEmpty: boolean;
}

<T> setelah nama interface membuat parameter tipe yang dapat digunakan di seluruh definisi interface. Dalam contoh ini, property value akan memiliki tipe apa pun yang kamu tentukan saat menggunakan interface, sedangkan isEmpty tetap bertipe boolean yang tetap.

Saat menggunakan interface generik, kamu menentukan tipe konkret di dalam tanda kurung sudut:

const stringContainer: Container<string> = {
  value: "hello",
  isEmpty: false
};
const numberContainer: Container<number> = {
  value: 42,
  isEmpty: false
};

Tantangan

Mudah

Buat interface generik bernama Result yang dapat menampung data dengan tipe apa pun beserta informasi keberhasilan.

Interface ini harus memiliki dua property:

success bertipe boolean
data bertipe T (parameter tipe generik)

Buat objek berikut menggunakan interface generikmu:

stringResult bertipe Result<string> dengan success: true dan data: "Operation completed"
numberResult bertipe Result<number> dengan success: true dan data: 42
booleanResult bertipe Result<boolean> dengan success: false dan data: false
arrayResult bertipe Result<string[]> dengan success: true dan data: ["item1", "item2", "item3"]

Buat fungsi generik bernama processResult yang:

Menggunakan parameter tipe generik T
Menerima satu parameter result bertipe Result<T>
Mengembalikan pesan string
Jika success bernilai true, kembalikan "Success: [data]"
Jika success bernilai false, kembalikan "Failed: [data]"

Cetak output berikut:

Cetak hasil pemanggilan processResult dengan stringResult
Cetak hasil pemanggilan processResult dengan numberResult
Cetak hasil pemanggilan processResult dengan booleanResult
Cetak hasil pemanggilan processResult dengan arrayResult
Cetak stringResult.data

Coba sendiri

// TODO: Tulis kodemu di sini

// Buat interface generik Result


// Buat object menggunakan interface Result


// Buat fungsi generik processResult


// Cetak output yang diminta

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengantar TypeScript

Latihan sendiri: Playground TypeScript