0Pricing
TypeScript Academy · Pelajaran

Penentuan Tipe Kontekstual: Inferensi dari Konteks

Pahami cara TypeScript menyimpulkan tipe dari konteks di sekitarnya.

Penentuan Tipe Kontekstual: Inferensi dari Konteks adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa Itu Pemberian Tipe Kontekstual?

Pemberian tipe kontekstual terjadi ketika TypeScript menyimpulkan tipe suatu ekspresi berdasarkan posisi kemunculannya — konteks menyediakan tipe tersebut, bukan nilainya sendiri.

document.addEventListener("click", (e) => {
  // e is inferred as MouseEvent from the event type
  console.log(e.clientX);
});

Pemberian Tipe Kontekstual dalam Fungsi Panggilan Balik

Ketika Anda meneruskan fungsi panggilan balik ke fungsi bertipe, TypeScript menyimpulkan tipe parameter dari tanda tangan fungsi panggilan balik yang diharapkan.

const nums = [1, 2, 3];
nums.forEach((n) => {
  // n inferred as number from Array<number>
  console.log(n.toFixed(2));
});

Pemberian Tipe Kontekstual dan Literal Objek

Ketika literal objek ditetapkan ke variabel bertipe, tipe propertinya disimpulkan dari tipe tersebut, sehingga pemeriksaan yang tepat dapat dilakukan.

interface Config { timeout: number; retries: number; }
const config: Config = {
  timeout: 3000,
  retries: 3,
  // extra: true // Error: excess property
};

Pemberian Tipe Kontekstual dalam JSX

Dalam React, properti handler peristiwa diberi tipe secara kontekstual sehingga tipe parameter peristiwa disimpulkan secara otomatis.

function Button({ onClick }: { onClick: (e: React.MouseEvent) => void }) {
  return <button onClick={onClick}>Click</button>;
}
// Caller: e is inferred as React.MouseEvent
<Button onClick={(e) => console.log(e.currentTarget)} />

Pemberian Tipe Kontekstual vs Anotasi Eksplisit

Pemberian tipe kontekstual sangat berguna, tetapi dapat digantikan oleh anotasi eksplisit. Anotasi eksplisit lebih diutamakan ketika keduanya tersedia.

const handler: (x: string) => void = (x: number) => {}; // Error
// Explicit annotation (number) conflicts with contextual (string)

Pemberian Tipe Kontekstual dengan Destrukturisasi

Parameter yang didestrukturisasi dalam fungsi dengan tipe kontekstual juga mewarisi tipenya dari konteks.

const pairs: [string, number][] = [["a", 1]];
pairs.forEach(([key, value]) => {
  // key: string, value: number — contextually typed
  console.log(key.toUpperCase(), value * 2);
});

Pemberian Tipe Kontekstual dan Tipe Kembalian

Ketika suatu fungsi ditetapkan ke variabel bertipe, tipe kembalian juga disimpulkan secara kontekstual.

type Transform = (x: number) => string;
const double: Transform = (x) => x * 2; // Error: number not string
const str: Transform = (x) => String(x * 2); // OK

Pemberian Tipe Kontekstual dalam Ekspresi Kondisional

TypeScript dapat meneruskan tipe kontekstual ke dalam ekspresi ternari dan operator logika.

const result: string | null =
  Math.random() > 0.5 ? "yes" : null; // both arms typed by context

Keterbatasan Pemberian Tipe Kontekstual

Pemberian tipe kontekstual tidak berlaku ketika ekspresi berada pada posisi nonkontekstual, seperti variabel mandiri tanpa anotasi.

const fn = (x) => x + 1; // x: any — no context to infer from
// Add annotation: const fn = (x: number) => x + 1;

Inferensi Dua Arah

TypeScript melakukan inferensi tipe dua arah: dari atas ke bawah (kontekstual) dan dari bawah ke atas (dari ekspresi). Keduanya bekerja sama untuk memberi Anda tipe yang paling akurat.

function apply<T>(fn: (x: T) => T, val: T): T { return fn(val); }
apply((x) => x.toUpperCase(), "hello"); // x inferred as string

Ringkasan: Pemberian Tipe Kontekstual

Pemberian tipe kontekstual memungkinkan TypeScript menyimpulkan tipe dari posisi penggunaan suatu ekspresi — fungsi panggilan balik, penetapan, properti JSX, dan destrukturisasi semuanya memanfaatkan mekanisme inferensi ini.

Pemeriksaan Singkat

Kapan pemberian tipe kontekstual berlaku pada parameter fungsi panggilan balik?

Yang Anda Pelajari

Pemberian tipe kontekstual adalah cara TypeScript menyimpulkan tipe dari posisi, bukan nilai. Fitur ini membuat fungsi panggilan balik, handler peristiwa, dan penetapan bertipe tetap ringkas sekaligus aman terhadap tipe.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penentuan Tipe Kontekstual: Inferensi dari Konteks” gratis?

Ya — teks lengkap “Penentuan Tipe Kontekstual: Inferensi dari Konteks” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Penentuan Tipe Kontekstual: Inferensi dari Konteks”?

Pahami cara TypeScript menyimpulkan tipe dari konteks di sekitarnya. Kamu berlatih TypeScript 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 TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript 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 2 dari 4.

Berapa lama pelajaran “Penentuan Tipe Kontekstual: Inferensi dari Konteks” 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 TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript 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

  1. Mekanisme Pelebaran dan Penyempitan Tipe
  2. Penentuan Tipe Kontekstual: Inferensi dari Konteks
  3. Pemeriksaan Properti Berlebih dan Kebaruan
  4. Assertion const dan as const
← Kembali ke TypeScript Academy