Frontend Academy · Pelajaran

Generics: T extends dan batasan

Tulis fungsi dan interface generik, batasi parameter tipe dengan extends, dan gunakan nilai default generik untuk API yang fleksibel.

Pelajaran 1 dari 413 langkah

Generics: T extends dan batasan adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu Generik?

Generik memungkinkan Anda menulis fungsi, kelas, dan antarmuka yang bekerja dengan berbagai tipe sekaligus mempertahankan keamanan tipe. Daripada menulis fungsi terpisah untuk setiap tipe, Anda menulis satu fungsi generik yang diparameterkan oleh variabel tipe.

Fungsi Generik Sederhana

Parameter tipe T dideklarasikan di dalam tanda kurung sudut. TypeScript menyimpulkan T dari tipe argumen — tidak diperlukan anotasi eksplisit di lokasi pemanggilan.

function identity<T>(value: T): T {
  return value;
}

identity(42);      // T is inferred as number, returns number
identity('hello'); // T inferred as string
identity<boolean>(true); // explicit

Antarmuka dan Tipe Generik

Parameterkan antarmuka dan tipe dengan generik untuk menjelaskan struktur data yang dapat digunakan kembali.

interface Box<T> {
  value: T;
  label?: string;
}

const numBox: Box<number> = { value: 42 };
const strBox: Box<string> = { value: 'hello', label: 'greeting' };

extends — Membatasi Tipe Generik

Gunakan T extends SomeType untuk membatasi nilai yang dapat dimiliki T. Fungsi tersebut hanya menerima tipe yang memenuhi batasan itu.

function getLength<T extends { length: number }>(item: T): number {
  return item.length; // safe: T is guaranteed to have length
}

getLength('hello');       // 5
getLength([1, 2, 3]);    // 3
getLength({ length: 7 }); // 7
// getLength(42);         // Error: number has no length

keyof dan Batasan Generik

keyof T menghasilkan union dari kunci properti T. Jika digabungkan dengan generik, fitur ini memungkinkan akses properti yang aman secara tipe.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'Alice', age: 30 };
getProperty(user, 'name');  // string
getProperty(user, 'age');   // number
// getProperty(user, 'foo'); // Error

Nilai Bawaan Generik

Berikan tipe bawaan untuk parameter generik dengan T = DefaultType. Ini digunakan ketika tersedia nilai bawaan yang sesuai, tetapi pemanggil dapat menggantinya.

interface Paginated<T = unknown> {
  items: T[];
  total: number;
  page: number;
}

const rawPage: Paginated = { items: [], total: 0, page: 1 };
const typedPage: Paginated<User> = { items: [], total: 0, page: 1 };

Beberapa Parameter Tipe

Fungsi dapat memiliki beberapa parameter tipe yang independen.

function zip<A, B>(arrA: A[], arrB: B[]): Array<[A, B]> {
  return arrA.map((a, i) => [a, arrB[i]]);
}

zip([1, 2, 3], ['a', 'b', 'c']);
// [[1,'a'], [2,'b'], [3,'c']]

Kelas Generik

Kelas juga dapat bersifat generik. Hal ini umum digunakan dalam struktur data seperti Stack, antrean, dan penyimpanan yang dapat diamati.

class Stack<T> {
  private items: T[] = [];
  push(item: T) { this.items.push(item); }
  pop(): T | undefined { return this.items.pop(); }
  peek(): T | undefined { return this.items.at(-1); }
  get size() { return this.items.length; }
}

const stack = new Stack<number>();
stack.push(1);
stack.push(2);
stack.pop(); // 2

Fungsi Generik Asinkron

Fungsi generik asinkron umum digunakan untuk panggilan API bertipe.

async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json() as Promise<T>;
}

const users = await fetchJson<User[]>('/api/users');
const profile = await fetchJson<UserProfile>('/api/me');

Infer dalam Tipe Kondisional

Kata kunci infer di dalam tipe kondisional mengekstrak tipe dari sebuah pola. Fitur ini digunakan dalam kode pustaka untuk mengekstrak tipe hasil suatu fungsi atau tipe elemen suatu array.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

type ElementType<T> = T extends Array<infer E> ? E : never;

type Fn = () => { name: string };
type Result = ReturnType<Fn>; // { name: string }

Kapan Menggunakan Generik

Gunakan generik ketika: 1) logika yang sama berlaku untuk beberapa tipe, 2) Anda memerlukan hubungan antara tipe masukan dan keluaran, 3) Anda sedang membuat struktur data atau utilitas yang dapat digunakan kembali. Jangan gunakan generik hanya demi menggunakannya — tipe konkret lebih jelas jika hanya ada satu kasus penggunaan.

Pemeriksaan Singkat

Apa yang dijamin oleh batasan T extends { length: number }?

Jawab di pelajaran interaktif

Ringkasan: Generik

Generik memparameterkan tipe sehingga satu fungsi/kelas/antarmuka dapat bekerja dengan berbagai tipe. T extends SomeType menambahkan batasan. keyof T menghasilkan union kunci properti. Nilai bawaan generik menggunakan T = Default. infer mengekstrak tipe dalam tipe kondisional. Gunakan generik untuk utilitas bertipe dan struktur data yang dapat digunakan kembali.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Generics: T extends dan batasan” gratis?

Ya — teks lengkap “Generics: T extends dan batasan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Generics: T extends dan batasan”?

Tulis fungsi dan interface generik, batasi parameter tipe dengan extends, dan gunakan nilai default generik untuk API yang fleksibel. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Generics: T extends dan batasan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Generics: T extends dan batasan
Tipe Utilitas: Partial, Required, Pick, Omit
Tipe Mapped dan Tipe Conditional
Penyempitan: typeof, instanceof, union terdiskriminasi

← Kembali ke Frontend Academy