TypeScript Academy · Pelajaran

Mengapa satisfies Ada

Pahami celah antara anotasi dan inferensi yang diisi oleh satisfies.

Mengapa satisfies Ada adalah pelajaran TypeScript 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 TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Dua Tujuan yang Saling Bertentangan

Saat mendeklarasikan konfigurasi, biasanya Anda menginginkan dua hal: validasi terhadap bentuk yang diketahui dan inferensi presisi atas nilai literal. Kedua tujuan ini sering kali bertentangan.

type Color = "red" | "green" | "blue";
// We want both: check the values AND remember exactly which ones.

Anotasi Menghilangkan Penyempitan Literal

Menambahkan anotasi tipe memvalidasi objek, tetapi memperlebar nilainya. Kompilator melupakan literal persis yang Anda tulis.

type Config = { color: string; retries: number };
const cfg: Config = { color: "red", retries: 3 };
// cfg.color is string, not "red" anymore.
console.log(cfg.color.toUpperCase());

Mengapa Pelebaran Merugikan

Jika color diperlebar menjadi string, Anda kehilangan kemampuan untuk menggunakannya di tempat yang memerlukan literal tertentu, seperti saat mengindeks tipe lain.

const cfg = { color: "red" } as { color: string };
// const exact: "red" = cfg.color; // Error: string not assignable to "red"
console.log(cfg.color);

Tanpa Anotasi, Validasi Hilang

Menghapus anotasi mempertahankan inferensi presisi, tetapi menghilangkan jaring pengaman. Kesalahan ketik dan bentuk yang salah tidak terdeteksi.

const cfg = { color: "rad", retries: 3 };
// No error on the typo "rad" because nothing validates it.
console.log(cfg.color);

Kesenjangan Validasi

Tanpa pemeriksaan, nilai tidak valid seperti warna yang salah eja dapat mengalir diam-diam melalui program Anda dan mungkin menyebabkan kerusakan jauh dari tempat kesalahan tersebut dibuat.

const palette = { primary: "blu" }; // typo, no error
console.log(palette.primary); // "blu"

Memperkenalkan Operator satisfies

Operator satisfies memvalidasi ekspresi terhadap suatu tipe sambil mempertahankan tipe hasil inferensi yang presisi. Anda mendapatkan yang terbaik dari kedua hal tersebut.

type Config = { color: string; retries: number };
const cfg = { color: "red", retries: 3 } satisfies Config;
console.log(cfg.color); // type is "red", value validated

satisfies Mempertahankan Literal

Setelah satisfies, cfg.color tetap berupa literal "red", bukan string yang lebar. Inferensi tetap dipertahankan.

type Config = { color: string };
const cfg = { color: "red" } satisfies Config;
const exact: "red" = cfg.color; // OK
console.log(exact);

satisfies Tetap Memvalidasi

Jika objek tidak cocok dengan tipe tersebut, satisfies melaporkan kesalahan, sama seperti anotasi.

type Config = { retries: number };
// const bad = { retries: "three" } satisfies Config; // Error
const good = { retries: 3 } satisfies Config;
console.log(good.retries);

Contoh yang Mendasari

Pertimbangkan peta rute yang kuncinya harus berupa rute yang diketahui dan nilainya berupa nama penangan. Kita menginginkan pelengkapan otomatis pada kunci AND nilai yang tervalidasi, dan satisfies menyediakannya.

type Routes = Record<string, { method: "GET" | "POST" }>;
const routes = {
  home: { method: "GET" },
  submit: { method: "POST" }
} satisfies Routes;
console.log(routes.home.method); // "GET" literal

Membandingkan Tiga Pendekatan

Anotasi: memvalidasi dan memperlebar. Tanpa anotasi: presisi, tetapi tidak tervalidasi. satisfies: memvalidasi dan tetap presisi. Pendekatan ketiga unggul untuk konfigurasi.

type C = { color: string };
const a: C = { color: "red" };          // widened
const b = { color: "red" };             // unvalidated
const c = { color: "red" } satisfies C; // validated + precise
console.log(a.color, b.color, c.color);

Kapan Menggunakan satisfies

Gunakan satisfies setiap kali Anda mendefinisikan nilai konstan yang harus sesuai dengan suatu tipe, tetapi Anda juga ingin menggunakan isi persisnya nanti.

type Sizes = Record<string, number>;
const sizes = { sm: 8, md: 16, lg: 24 } satisfies Sizes;
// keys "sm" | "md" | "lg" stay known for autocomplete
console.log(sizes.md);

Pemeriksaan Singkat: Mengapa satisfies

Uji pemahaman Anda tentang alasan keberadaan satisfies.

Ringkasan: Alasan satisfies Ada

Anda telah mempelajari bahwa anotasi memvalidasi tetapi memperlebar, tanpa anotasi mempertahankan inferensi tetapi tidak memvalidasi, dan satisfies memberikan validasi sekaligus inferensi presisi, yang ideal untuk objek konfigurasi.

type C = { color: string };
const c = { color: "blue" } satisfies C;
const exact: "blue" = c.color;
console.log(exact);

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengapa satisfies Ada” gratis?

Ya — teks lengkap “Mengapa satisfies Ada” 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 “Mengapa satisfies Ada”?

Pahami celah antara anotasi dan inferensi yang diisi oleh satisfies. 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 1 dari 4.

Berapa lama pelajaran “Mengapa satisfies Ada” 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

← Kembali ke TypeScript Academy