1 
2TypeScript telah menjadi standar industri untuk pengembangan web berskala besar. Meskipun sebagian besar pengembang mengetahui dasar-dasar interface dan type, kekuatan sebenarnya terletak pada sistem tipe tingkat lanjutnya. Berikut adalah 5 pola yang akan membedakan Anda sebagai insinyur senior.
3 
4## 1. Generic Constraints
5 
6Generics sangat powerful, tetapi terkadang Anda perlu membatasi apa yang bisa dimasukkan. `extends` adalah teman Anda di sini.
7 
8```typescript
9interface HasId {
10  id: string;
11}
12 
13function getById<T extends HasId>(list: T[], id: string): T | undefined {
14  return list.find((item) => item.id === id);
15}
16```
17 
18Dengan memastikan `T` meng-extend `HasId`, kita menjamin bahwa mengakses `.id` di dalam fungsi adalah aman.
19 
20## 2. Conditional Types
21 
22Conditional types memungkinkan Anda membuat pemetaan tipe yang tidak seragam. Sintaksnya mirip dengan operator ternary di JavaScript.
23 
24```typescript
25type IsString<T> = T extends string ? true : false;
26 
27type A = IsString<string>; // true
28type B = IsString<number>; // false
29```
30 
31Kasus penggunaan praktis adalah memfilter tipe dari union:
32 
33```typescript
34type Diff<T, U> = T extends U ? never : T;
35type NonNullable<T> = Diff<T, null | undefined>;
36```
37 
38## 3. Mapped Types
39 
40Mapped types memungkinkan Anda membuat tipe baru berdasarkan tipe yang sudah ada dengan mentransformasi propertinya.
41 
42```typescript
43type ReadOnly<T> = {
44  readonly [P in keyof T]: T[P];
45};
46 
47interface User {
48  name: string;
49  age: number;
50}
51 
52type ReadOnlyUser = ReadOnly<User>;
53```
54 
55Anda bahkan bisa menambah atau menghapus modifier:
56 
57```typescript
58type Mutable<T> = {
59  -readonly [P in keyof T]: T[P];
60};
61```
62 
63## 4. Template Literal Types
64 
65Diperkenalkan di TypeScript 4.1, fitur ini memungkinkan Anda memanipulasi tipe string secara langsung.
66 
67```typescript
68type World = 'world';
69type Greeting = `hello ${World}`; // "hello world"
70 
71type Color = 'red' | 'blue';
72type Quantity = 'light' | 'dark';
73 
74type Palette = `${Quantity}-${Color}`;
75// "light-red" | "light-blue" | "dark-red" | "dark-blue"
76```
77 
78Ini sangat berguna untuk mengetik string yang mengikuti pola tertentu, seperti kelas CSS atau nama event.
79 
80## 5. Kata Kunci `infer`
81 
82Kata kunci `infer` dalam conditional types memungkinkan Anda mengekstrak tipe dari tipe lain.
83 
84```typescript
85type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
86 
87function check(): boolean {
88  return true;
89}
90 
91type CheckReturn = ReturnType<typeof check>; // boolean
92```
93 
94Di sini, kita meminta TypeScript untuk "menyimpulkan" tipe kembalian `R` dari sebuah fungsi dan mengembalikannya.
95 
96## Kesimpulan
97 
98Menguasai pola-pola ini memungkinkan Anda menulis library dan utilitas yang kokoh dan memberikan pengalaman pengembang (DX) yang sangat baik. Tujuan TypeScript tingkat lanjut bukanlah kompleksitas demi kompleksitas, melainkan keamanan dan ekspresivitas.
99