Pattern TypeScript Lanjutan untuk Kode yang Lebih Baik

Pattern TypeScript Lanjutan untuk Kode yang Lebih Baik

Tim Development

Tim Development

Diterbitkan pada 16 September 2025 12 menit baca visibility 1520 views

TypeScript Patterns untuk Developer

TypeScript telah menjadi standar industri untuk pengembangan JavaScript. Dengan pattern yang tepat, kita dapat menulis kode yang lebih maintainable dan type-safe.

Generic Types

Generic memungkinkan kita untuk membuat komponen yang reusable dan type-safe:

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

// Usage
const userResponse: ApiResponse<User> = await fetchUser(id);
const postsResponse: ApiResponse<Post[]> = await fetchPosts();

Utility Types

TypeScript menyediakan utility types yang powerful untuk transformasi types:

  • Partial - membuat semua properties menjadi optional
  • Required - membuat semua properties menjadi required
  • Pick<T, K> - memilih properties tertentu dari type
  • Omit<T, K> - menghilangkan properties tertentu dari type

Contoh Penggunaan

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

// Untuk update, semua field optional
type UserUpdate = Partial<User>;

// Untuk display, tanpa password
type UserDisplay = Omit<User, "password">;

// Untuk login, hanya email dan password
type LoginData = Pick<User, "email" | "password">;

Advanced Patterns

Beberapa pattern lanjutan yang sangat berguna:

// Conditional Types
type NonNullable<T> = T extends null | undefined ? never : T;

// Mapped Types
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

// Template Literal Types
type EventName<T extends string> = `on${Capitalize<T>}`;

Best Practices

Beberapa best practices yang perlu diingat:

  1. Gunakan strict mode untuk type checking yang lebih ketat
  2. Definisikan types yang jelas dan ekspresif
  3. Hindari any type sebisa mungkin, gunakan unknown jika perlu
  4. Manfaatkan type guards untuk runtime type checking

Type Guards Example

function isString(value: unknown): value is string {
  return typeof value === "string";
}

function processValue(value: unknown) {
  if (isString(value)) {
    // TypeScript tahu value adalah string di sini
    console.log(value.toUpperCase());
  }
}

Important: Selalu prioritaskan type safety daripada convenience. Kode yang type-safe lebih mudah di-maintain dan debug.

Oleh Tim Development