Jenis Utilitas

TypeScript menyediakan beberapa tipe utilitas global untuk memfasilitasi transformasi tipe umum. Tipe ini bersifat generik dan memungkinkan Anda membuat tipe baru secara deklaratif dari tipe yang sudah ada.

Empat jenis utilitas yang paling umum digunakan adalah:

1.Partial<T>

Membuat semua properti bertipe T opsional. Ini sangat berguna untuk fungsi pembaruan/tambalan di mana pemanggil mungkin hanya menyediakan subset bidang:

interface User {
  id: number;
  name: string;
  email: string;
}

// All properties of User become optional: { id?: number; name?: string; email?: string; }
type UserUpdate = Partial<User>;

2.Readonly<T>

Membuat semua properti bertipe T hanya dibaca. Setiap upaya untuk menetapkan ulang properti akan memicu kesalahan kompiler pada waktu kompilasi:

interface Point {
  x: number;
  y: number;
}

const p: Readonly<Point> = { x: 10, y: 20 };
// p.x = 5; // Error: cannot assign to 'x' because it is a read-only property

3.Pick<T, Keys>

Membuat tipe dengan memilih hanya sekumpulan kunci tertentu (diwakili oleh gabungan string) dari tipe T:

interface Article {
  id: number;
  title: string;
  content: string;
  views: number;
}

// Selects only 'title' and 'views': { title: string; views: number; }
type ArticlePreview = Pick<Article, 'title' | 'views'>;

4.Omit<T, Keys>

Membuat tipe dengan menghapus sekumpulan kunci tertentu dari tipe T. Ini adalah ganda dari Pick:

interface Product {
  id: number;
  name: string;
  price: number;
  secretVendorCode: string;
}

// Removes 'secretVendorCode': { id: number; name: string; price: number; }
type PublicProduct = Omit<Product, 'secretVendorCode'>;

5.Record<Keys, Type>

Membuat tipe objek yang kunci propertinya adalah Keys dan nilai propertinya adalah Type. Ini sangat berguna untuk memetakan kunci ke nilai, mewakili kamus atau tabel hash (peta nilai kunci):

type Page = 'home' | 'about' | 'contact';

interface PageInfo {
  title: string;
}

// Creates a dictionary with keys 'home' | 'about' | 'contact' and values PageInfo
const nav: Record<Page, PageInfo> = {
  home: { title: 'Home Page' },
  about: { title: 'About Us' },
  contact: { title: 'Contact Us' },
};

Cobalah sendiri

Latihan 1: Pembaruan Profil dengan Parsial

Latihan 2: Menghapus Bidang Sensitif dengan Omit

Latihan 3: Konfigurasi Publik dengan Pick dan Readonly

Latihan 4: Registri Pengguna dengan Rekam dan Hanya Baca