1~
2Ang TypeScript ay naging industry standard para sa large-scale na web development. Habang alam ng karamihan ng mga developer ang mga pangunahing kaalaman tungkol sa interfaces at types, ang tunay na kapangyarihan ay nasa advanced type system nito. Narito ang 5 pattern na magtatangi sa iyo bilang isang senior engineer.
3~
4## 1. Generic Constraints
5~
6Ang Generics ay makapangyarihan, ngunit minsan kailangan mong limitahan kung ano ang maaaring ipasa. Ang `extends` ang kakampi mo dito.
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~
18Sa pamamagitan ng pagtiyak na ang `T` ay nag-eextend ng `HasId`, ginagarantiya natin na ligtas ang pag-access sa `.id` sa loob ng function.
19~
20## 2. Conditional Types
21~
22Ang Conditional Types ay nagbibigay-daan sa iyo na lumikha ng mga non-uniform na type mapping. Ang syntax ay katulad ng ternary operator sa 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~
31Isang praktikal na gamit ay ang pag-filter ng mga type mula sa isang 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~
40Ang Mapped Types ay nagbibigay-daan sa iyo na lumikha ng mga bagong type batay sa mga luma sa pamamagitan ng pag-transform ng mga property.
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~
55Maaari ka ring magdagdag o mag-alis ng mga modifier:
56~
57```typescript
58type Mutable<T> = {
59  -readonly [P in keyof T]: T[P];
60};
61```
62~
63## 4. Template Literal Types
64~
65Ipinakilala sa TypeScript 4.1, pinapayagan ka nitong manipulahin ang mga string type nang direkta.
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~
78Ito ay napaka-kapaki-pakinabang para sa pag-type ng mga string na sumusunod sa isang partikular na pattern, tulad ng CSS classes o event names.
79~
80## 5. Ang `infer` Keyword
81~
82Ang `infer` keyword sa loob ng conditional types ay nagbibigay-daan sa iyo na i-extract ang mga type mula sa ibang mga type.
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~
94Dito, hinihiling natin sa TypeScript na "i-infer" ang return type na `R` ng isang function at ibalik ito.
95~
96## Kongklusyon
97~
98Ang pag-master ng mga pattern na ito ay nagbibigay-daan sa iyo na magsulat ng mga library at utility na matibay at nagbibigay ng mahusay na developer experience (DX). Ang layunin ng advanced TypeScript ay hindi pagiging kumplikado para sa kapakanan ng pagiging kumplikado, kundi kaligtasan at kakayahang mag-express.
99~