Tujuan Pembelajaran

Menguasai utility types bawaan TypeScript
Bisa menggunakan mapped types
Mengerti conditional types dasar

Analogi

Diagram


      Utility Types:
├── Partial<T>     → semua optional
├── Required<T>    → semua wajib
├── Pick<T, K>     → pilih beberapa key
├── Omit<T, K>     → hapus beberapa key
├── Record<K, V>   → object dengan key dinamis
└── ReturnType<T>  → tipe return fungsi

Utility types memungkinkan transformasi tipe tanpa mendefinisikan ulang

Penjelasan Konsep

TypeScript punya banyak utility types bawaan yang memungkinkan kamu memanipulasi tipe secara declarative.

Ini seperti lodash untuk tipe — transformasi tipe tanpa boilerplate.

Utility Types yang Paling Sering Dipakai

Partial<T>

Buat semua properti menjadi optional.

Berguna untuk update function:

interface User { id: number; name: string; email: string; }
type UpdateUser = Partial<User>;  // { id?: number; name?: string; email?: string }

function updateUser(id: number, changes: Partial<User>) { ... }
updateUser(1, { name: 'Baru' });  // OK, tidak perlu kirim semua field

Pick<T, K>

Ambil subset properti:

type UserPreview = Pick<User, 'id' | 'name'>;  // { id: number; name: string }

Omit<T, K>

Hapus properti tertentu:

type CreateUser = Omit<User, 'id'>;  // { name: string; email: string }

Record<K, V>

Object dengan key dan value type tertentu:

const rolePermissions: Record<string,

String[]> = {
  admin: ['read', 'write', 'delete'],
  user: ['read'],
};

Mapped Types: Transformasi Tipe

Mapped types memungkinkan kamu membuat tipe baru dengan mengubah setiap properti tipe yang sudah ada:

// Buat semua properti menjadi readonly
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

// Buat semua properti menjadi optional
type Partial<T> = {
  [P in keyof T]?: T[P];
};

Conditional Types

Tipe yang bergantung pada kondisi:

type IsString<T> = T extends string ? true : false;
type A = IsString<'hello'>;  // true
type B = IsString<42>;       // false

Conditional types memungkinkan type-level programming — logika di level tipe.

Ini advanced tapi sangat powerful untuk library authors.

Inti yang Perlu Dipahami

Bagian ini berfokus pada menguasai utility types bawaan TypeScript., bisa menggunakan mapped types., dan mengerti conditional types dasar. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Advanced Types, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Utility types memungkinkan transformasi tipe tanpa mendefinisikan ulang. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Omit<User, ‘password’> menghapus field sensitif untuk response. Pick untuk DTO ringan. Partial<Omit<…>> untuk update yang hanya kirim field yang berubah.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

typescript

// API layer pattern dengan utility types
interface User {
  id: number;
  name: string;
  email: string;
  password: string;
  role: 'admin' | 'user';
  createdAt: Date;
}

// DTO (Data Transfer Object) patterns
type CreateUserDto = Omit<User, 'id' | 'createdAt'>;
type UpdateUserDto = Partial<Omit<User, 'id' | 'createdAt'>>;
type UserResponse = Omit<User, 'password'>;
type UserPreview = Pick<User, 'id' | 'name' | 'email'>;

// Generic CRUD service pattern
interface CrudService<T, CreateDto, UpdateDto> {
  findAll(): Promise<T[]>;
  findById(id: number): Promise<T | null>;
  create(data: CreateDto): Promise<T>;
  update(id: number, data: UpdateDto): Promise<T>;
  delete(id: number): Promise<void>;
}

// Implementasi
class UserService implements CrudService<UserResponse, CreateUserDto, UpdateUserDto> {
  async findAll(): Promise<UserResponse[]> { /* ... */ return []; }
  async findById(id: number): Promise<UserResponse | null> { return null; }
  async create(data: CreateUserDto): Promise<UserResponse> { throw new Error(); }
  async update(id: number, data: UpdateUserDto): Promise<UserResponse> { throw new Error(); }
  async delete(id: number): Promise<void> { /* ... */ }
}

// Record untuk lookup
type HttpStatus = 200 | 201 | 400 | 401 | 404 | 500;
const statusMessages: Record<HttpStatus, string> = {
  200: 'OK',
  201: 'Created',
  400: 'Bad Request',
  401: 'Unauthorized',
  404: 'Not Found',
  500: 'Internal Server Error',
};

Penjelasan Kode

Omit<User, 'password'> menghapus field sensitif untuk response. Pick untuk DTO ringan. Partial<Omit<...>> untuk update yang hanya kirim field yang berubah.

Prompt AI

Buat tipe DTO lengkap untuk entity Product: CreateDto, UpdateDto, ResponseDto (tanpa internal fields), dan PublicDto (hanya field yang boleh dilihat customer).

Pertanyaan Reflektif

Utility types mengurangi duplikasi tipe signifikan. Hitung berapa baris kode yang kamu hemat dengan menggunakan Pick/Omit/Partial dibanding mendefinisikan tipe manual.