Tipe Utilitas: Partial, Required, Pick, Omit
Transformasikan tipe yang sudah ada dengan tipe utilitas bawaan untuk membuat variasi tanpa duplikasi.
Tipe Utilitas: Partial, Required, Pick, Omit adalah pelajaran Frontend 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Tipe Utilitas Bawaan
TypeScript menyediakan sekumpulan tipe utilitas generik yang mengubah tipe lain. Tipe-tipe ini menghilangkan kebutuhan untuk menulis ulang variasi antarmuka yang serupa secara manual.
Partial<T>
Membuat semua properti T bersifat opsional. Sangat cocok untuk data pembaruan sebagian ketika tidak semua bidang perlu disediakan.
interface User { name: string; email: string; age: number; }
function updateUser(id: string, changes: Partial<User>) {
// changes.name is string | undefined
// changes.email is string | undefined
}
updateUser('1', { name: 'Bob' }); // only update nameRequired<T>
Kebalikan dari Partial — membuat semua properti wajib dengan menghapus penanda opsional (?).
interface Config {
host?: string;
port?: number;
debug?: boolean;
}
function validate(config: Required<Config>) {
// All three are now required
console.log(config.host, config.port, config.debug);
}Pick<T, K>
Membuat tipe yang hanya berisi properti yang ditentukan dari T. Berguna untuk memangkas objek besar sehingga hanya menyisakan bidang yang Anda perlukan.
interface User { id: number; name: string; email: string; password: string; }
type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
// { id: number; name: string; email: string }
// password is excluded — safe to send to clientOmit<T, K>
Membuat tipe dengan menghapus properti yang ditentukan. Ini adalah kebalikan dari Pick.
type UserWithoutPassword = Omit<User, 'password'>;
// { id: number; name: string; email: string }
type CreateUserDto = Omit<User, 'id'>; // new users don't have an id yetReadonly<T>
Membuat semua properti bersifat hanya-baca — mencegah penetapan ulang. Berguna untuk objek konfigurasi dan data yang tidak dapat diubah.
const config: Readonly<Config> = {
host: 'localhost',
port: 3000,
};
config.port = 8080; // Error: cannot assign to 'port' because it is read-onlyRecord<K, V>
Membuat tipe objek dengan kunci bertipe K dan nilai bertipe V. Lebih rapi daripada tanda tangan indeks mentah ketika kunci merupakan union yang sudah diketahui.
type Role = 'admin' | 'editor' | 'viewer';
type Permissions = Record<Role, { canEdit: boolean; canDelete: boolean }>;
const perms: Permissions = {
admin: { canEdit: true, canDelete: true },
editor: { canEdit: true, canDelete: false },
viewer: { canEdit: false, canDelete: false },
};ReturnType<T> dan Parameters<T>
Mengekstrak tipe hasil dan tipe parameter dari suatu tipe fungsi. Berguna ketika Anda tidak dapat mengimpor sebuah tipe tetapi perlu mencocokkan tanda tangan fungsi.
function fetchUser(id: number) {
return { id, name: 'Alice' };
}
type UserResult = ReturnType<typeof fetchUser>; // { id: number; name: string }
type FetchParams = Parameters<typeof fetchUser>; // [id: number]Awaited<T>
Membuka bungkus tipe Promise menjadi tipe nilai yang telah diselesaikan. Berguna ketika bekerja dengan fungsi asinkron.
type UserResponse = Awaited<ReturnType<typeof fetchUser>>;
// Resolves both the function return and the Promise
async function load() { return { user: { name: 'Alice' } }; }
type Loaded = Awaited<ReturnType<typeof load>>; // { user: { name: string } }Extract<T, U> dan Exclude<T, U>
Extract<T, U> hanya mempertahankan tipe dalam T yang dapat ditetapkan ke U. Exclude<T, U> menghapus tipe-tipe tersebut.
type A = 'a' | 'b' | 'c' | 'd';
type BC = Extract<A, 'b' | 'c' | 'e'>; // 'b' | 'c'
type AD = Exclude<A, 'b' | 'c'>; // 'a' | 'd'
// NonNullable removes null and undefined:
type T = string | null | undefined;
type NonNull = NonNullable<T>; // stringMenggabungkan Tipe Utilitas
Tipe utilitas dapat digabungkan untuk membuat tipe yang presisi.
type UpdatePayload<T> = Partial<Omit<T, 'id' | 'createdAt'>>;
// Use for PATCH endpoints — omit immutable fields, make rest optional
function patch(id: string, data: UpdatePayload<User>) {
// data can have any subset of mutable user fields
}Pemeriksaan Singkat
Tipe utilitas mana yang menghapus kunci tertentu dari sebuah antarmuka?
Ringkasan: Tipe Utilitas
Partial membuat semua bidang bersifat opsional. Required menghapus penanda opsional. Pick mempertahankan kunci yang dipilih. Omit menghapus kunci yang dipilih. Readonly mencegah perubahan. Record memetakan kunci union ke tipe nilai. ReturnType dan Parameters mengekstrak tipe fungsi. Gabungkan utilitas untuk membuat tipe DTO yang presisi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Tipe Utilitas: Partial, Required, Pick, Omit” gratis?
Ya — teks lengkap “Tipe Utilitas: Partial, Required, Pick, Omit” 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 “Tipe Utilitas: Partial, Required, Pick, Omit”?
Transformasikan tipe yang sudah ada dengan tipe utilitas bawaan untuk membuat variasi tanpa duplikasi. 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 2 dari 4.
Berapa lama pelajaran “Tipe Utilitas: Partial, Required, Pick, Omit” 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