Pattern TypeScript Lanjutan untuk Kode yang Lebih Baik
Tim Development
Diterbitkan pada 16 September 2025 • 12 menit baca • 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:
- Gunakan strict mode untuk type checking yang lebih ketat
- Definisikan types yang jelas dan ekspresif
- Hindari any type sebisa mungkin, gunakan unknown jika perlu
- 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.