TypeScript Academy · Pelajaran

Pernyataan const dengan as const

Bekukan objek dan array menjadi jenis literal readonly secara mendalam.

Pernyataan const dengan as const adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Pernyataan as const

Pernyataan const, yang ditulis sebagai as const, memberi tahu TypeScript untuk menyimpulkan tipe readonly yang paling spesifik dan mendalam untuk suatu nilai. Properti objek menjadi literal dan tidak dapat diubah; larik menjadi tupel readonly.

const point = { x: 10, y: 20 } as const;
// type: { readonly x: 10; readonly y: 20 }
console.log(point.x, point.y);

Tanpa as const

Tanpa pernyataan tersebut, properti objek melebar. { x: 10 } disimpulkan sebagai x: number dan dapat diubah. Bandingkan dengan adegan sebelumnya untuk melihat perubahan yang dibuat oleh as const.

const a = { x: 10 };       // x: number, mutable
const b = { x: 10 } as const; // x: 10, readonly
a.x = 99; // allowed
console.log(a.x, b.x);

Membekukan Properti Menjadi Literal

as const mengubah setiap properti string menjadi tipe literalnya. Ini sangat berguna untuk objek config yang kunci dan nilainya harus tetap persis.

const config = {
  env: 'production',
  retries: 3
} as const;
// env: 'production', retries: 3
console.log(config.env, config.retries);

readonly Mencegah Mutasi

Karena as const menjadikan properti readonly, kompilator mencegah penetapan ulang. Nilai tersebut tidak dapat diubah pada tingkat tipe, sehingga terlindung dari perubahan yang tidak disengaja.

const settings = { mode: 'dark' } as const;
console.log(settings.mode);
// settings.mode = 'light'; // Error: readonly property

Pernyataan const pada Larik

Jika diterapkan pada larik, as const menghasilkan tupel readonly yang berisi tipe-tipe literal. Panjangnya tetap dan setiap elemen mempertahankan nilai persisnya.

const colors = ['red', 'green', 'blue'] as const;
// type: readonly ['red', 'green', 'blue']
console.log(colors[0], colors.length);

Tidak Ada Mutasi pada Larik readonly

Tupel readonly menolak metode yang mengubah data seperti push atau penetapan indeks. Data terkunci, tepat seperti yang Anda perlukan untuk tabel pencarian tetap.

const days = ['Mon', 'Tue', 'Wed'] as const;
console.log(days.join(', '));
// days.push('Thu'); // Error: push does not exist on readonly tuple

Menurunkan Gabungan dengan typeof arr[number]

Pola yang sangat berguna: ambil larik readonly lalu turunkan gabungan tipe elemennya menggunakan typeof arr[number]. Anda menulis nilainya satu kali dan langsung mendapatkan gabungan literal.

const ROLES = ['admin', 'editor', 'viewer'] as const;
type Role = typeof ROLES[number];
// 'admin' | 'editor' | 'viewer'
const r: Role = 'editor';
console.log(r);

Satu Sumber Kebenaran

Dengan cara ini, larik saat program dijalankan dan tipe Anda tetap sinkron. Tambahkan nilai ke larik, lalu gabungannya diperbarui secara otomatis — tanpa daftar duplikat yang harus dipelihara.

const SIZES = ['S', 'M', 'L', 'XL'] as const;
type Size = typeof SIZES[number];

function pick(s: Size): void {
  console.log('Picked', s);
}
pick('M');

Pernyataan const pada Tupel

Untuk tupel yang tipe elemennya berbeda, as const mempertahankan tipe persis dan urutannya, sehingga menghasilkan tupel readonly yang tepat.

const pair = [1, 'one'] as const;
// type: readonly [1, 'one']
console.log(pair[0], pair[1]);

Perilaku readonly Mendalam

as const berlaku secara mendalam. Objek dan larik bertingkat juga menjadi readonly dengan tipe literal hingga ke tingkat terdalam.

const data = {
  name: 'app',
  tags: ['a', 'b']
} as const;
// tags is readonly ['a', 'b']
console.log(data.name, data.tags[1]);

Pernyataan const untuk Enumerasi

Objek const ditambah gabungan turunan merupakan alternatif ringan untuk enum. Anda mendapatkan nilai literal saat program dijalankan dan tipe yang persis, tanpa kode tambahan yang dihasilkan.

const Status = {
  Idle: 'idle',
  Active: 'active'
} as const;
type Status = typeof Status[keyof typeof Status];
const s: Status = Status.Active;
console.log(s);

Pemeriksaan Singkat

Uji pemahaman Anda tentang pernyataan const.

Ringkasan: as const

Anda telah mempelajari bahwa as const:

Menyimpulkan tipe literal readonly yang paling spesifik dan mendalam.
Mengubah properti objek menjadi bidang literal readonly.
Mengubah larik menjadi tupel readonly yang berisi literal.
Memungkinkan penurunan gabungan melalui typeof arr[number], sehingga nilai dan tipe tetap sinkron.

Selanjutnya, kita menggabungkan literal menjadi gabungan yang ekspresif.

const LEVELS = ['low', 'mid', 'high'] as const;
type Level = typeof LEVELS[number];
const chosen: Level = 'mid';
console.log(chosen);

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pernyataan const dengan as const” gratis?

Ya — teks lengkap “Pernyataan const dengan as const” 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 “Pernyataan const dengan as const”?

Bekukan objek dan array menjadi jenis literal readonly secara mendalam. 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 3 dari 4.

Berapa lama pelajaran “Pernyataan const dengan as const” 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