TypeScript Academy · Pelajaran

satisfies versus Anotasi Jenis

Pertahankan inferensi literal sekaligus memvalidasi bentuknya.

satisfies versus Anotasi Jenis 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.

Pola Anotasi

Pola klasik const config: Type = {...} memvalidasi objek, tetapi tipe variabelnya menjadi Type, sehingga semua literal di dalamnya diperlebar.

type Config = { mode: string; level: number };
const config: Config = { mode: "dark", level: 5 };
// config.mode has type string
console.log(config.mode);

Seperti Apa Pelebaran Itu

Dengan anotasi tersebut, config.mode adalah string. Anda tidak dapat menetapkannya ke variabel yang mengharapkan literal "dark".

type Config = { mode: string };
const config: Config = { mode: "dark" };
// const m: "dark" = config.mode; // Error: string not assignable to "dark"
console.log(config.mode);

Pola satisfies

Dengan const config = {...} satisfies Type, variabel mempertahankan tipe hasil inferensi yang exact sekaligus tetap diperiksa terhadap Type.

type Config = { mode: string; level: number };
const config = { mode: "dark", level: 5 } satisfies Config;
// config.mode has type "dark"
console.log(config.mode);

Inferensi Exact Dipertahankan

Sekarang config.mode adalah literal "dark", sehingga dapat digunakan di mana pun tipe yang lebih sempit diperlukan.

type Config = { mode: string };
const config = { mode: "dark" } satisfies Config;
const m: "dark" = config.mode; // OK
console.log(m);

Keduanya Tetap Memvalidasi

Kedua pola menolak objek yang tidak valid. Perbedaannya hanya terletak pada tipe variabel yang dihasilkan, bukan pada apakah validasi dilakukan.

type Config = { level: number };
// const a: Config = { level: "x" }; // Error
// const b = { level: "x" } satisfies Config; // Error
const ok = { level: 3 } satisfies Config;
console.log(ok.level);

Properti Tambahan Terdeteksi

Seperti anotasi, satisfies menandai properti berlebih yang tidak ada dalam tipe target, sehingga membantu menemukan kesalahan ketik pada kunci.

type Config = { mode: string };
// const c = { mode: "dark", extar: true } satisfies Config; // Error: extar
const c = { mode: "dark" } satisfies Config;
console.log(c.mode);

Mempertahankan Ketupelan

satisfies juga membantu array mempertahankan presisi seperti tupel saat dipadukan dengan as const, sekaligus tetap memvalidasi tipe elemen.

type Nums = readonly number[];
const xs = [1, 2, 3] as const satisfies Nums;
// xs is a readonly tuple [1, 2, 3], validated as numbers
console.log(xs.length);

Anotasi Memperlebar Anggota Gabungan

Jika suatu bidang berupa gabungan seperti "a" | "b", anotasi yang bertipe gabungan akan mempertahankannya sebagai gabungan, tetapi tipe bidang yang lebih lebar akan memperlebarnya. satisfies menetapkan anggota exact tersebut.

type Config = { tier: string };
const withAnn: Config = { tier: "pro" };       // tier: string
const withSat = { tier: "pro" } satisfies Config; // tier: "pro"
console.log(withAnn.tier, withSat.tier);

Mempertahankan Pelengkapan Otomatis Saat Membaca

Karena satisfies mempertahankan kunci dan nilai literal, editor dapat memberikan pelengkapan otomatis berdasarkan objek exact, bukan tipe yang dideklarasikan dan lebih lebar.

type Theme = Record<string, string>;
const theme = { bg: "black", fg: "white" } satisfies Theme;
// theme.<autocomplete shows bg and fg>
console.log(theme.bg, theme.fg);

Memilih di Antara Keduanya

Gunakan anotasi biasa saat Anda memang menginginkan tipe yang lebih lebar. Gunakan satisfies saat Anda menginginkan validasi, tetapi juga perlu mempertahankan bentuk hasil inferensi yang presisi.

type Config = { mode: string };
// Want wide type for reassignment flexibility -> annotation
let a: Config = { mode: "dark" };
// Want exact literals for later indexing -> satisfies
const b = { mode: "dark" } satisfies Config;
console.log(a.mode, b.mode);

Ringkasan Berdampingan

Anotasi memperlebar; satisfies mempertahankan. Keduanya memvalidasi. Untuk konfigurasi yang tidak dapat diubah dan hanya dibaca, satisfies biasanya merupakan pilihan bawaan yang lebih baik.

type C = { color: string; size: number };
const widened: C = { color: "red", size: 1 };
const exact = { color: "red", size: 1 } satisfies C;
console.log(widened.color, exact.color);

Pemeriksaan Singkat: satisfies vs Anotasi

Uji pemahaman Anda tentang perbedaannya.

Ringkasan: satisfies vs Anotasi Tipe

Anotasi tipe memvalidasi, tetapi memperlebar literal menjadi tipe dasarnya. Operator satisfies memvalidasi dan mempertahankan inferensi exact, termasuk nilai literal, kunci, dan presisi tupel.

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

Pertanyaan yang Sering Diajukan

Apakah pelajaran “satisfies versus Anotasi Jenis” gratis?

Ya — teks lengkap “satisfies versus Anotasi Jenis” 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 “satisfies versus Anotasi Jenis”?

Pertahankan inferensi literal sekaligus memvalidasi bentuknya. 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 “satisfies versus Anotasi Jenis” 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