5 Mẫu TypeScript Nâng Cao Dành Cho Kỹ Sư Cao Cấp

spinny:~/writing $ vim advanced-typescript-patterns.md

1~
2TypeScript đã trở thành tiêu chuẩn ngành cho phát triển web quy mô lớn. Mặc dù hầu hết các lập trình viên đều biết các kiến thức cơ bản về interface và type, sức mạnh thực sự nằm ở hệ thống type nâng cao. Dưới đây là 5 mẫu sẽ giúp bạn nổi bật với tư cách là một kỹ sư cao cấp.
3~
4## 1. Generic Constraints
5~
6Generics rất mạnh mẽ, nhưng đôi khi bạn cần giới hạn những gì có thể được truyền vào. `extends` là người bạn đồng hành của bạn ở đây.
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~
18Bằng cách đảm bảo `T` kế thừa `HasId`, chúng ta đảm bảo rằng việc truy cập `.id` bên trong hàm là an toàn.
19~
20## 2. Conditional Types
21~
22Conditional types cho phép bạn tạo các ánh xạ type không đồng nhất. Cú pháp tương tự như toán tử ba ngôi trong 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~
31Một trường hợp sử dụng thực tế là lọc các type từ một 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 cho phép bạn tạo các type mới dựa trên các type cũ bằng cách biến đổi các thuộc tính.
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~
55Bạn thậm chí có thể thêm hoặc xóa các modifier:
56~
57```typescript
58type Mutable<T> = {
59  -readonly [P in keyof T]: T[P];
60};
61```
62~
63## 4. Template Literal Types
64~
65Được giới thiệu trong TypeScript 4.1, chúng cho phép bạn thao tác trực tiếp với các kiểu chuỗi.
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~
78Điều này cực kỳ hữu ích để định kiểu cho các chuỗi tuân theo một mẫu cụ thể, như các lớp CSS hoặc tên sự kiện.
79~
80## 5. Từ khóa `infer`
81~
82Từ khóa `infer` trong conditional types cho phép bạn trích xuất type từ các type khác.
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~
94Ở đây, chúng ta yêu cầu TypeScript "suy luận" kiểu trả về `R` của một hàm và trả về nó.
95~
96## Kết luận
97~
98Thành thạo các mẫu này cho phép bạn viết các thư viện và tiện ích mạnh mẽ, mang lại trải nghiệm phát triển (DX) tuyệt vời. Mục tiêu của TypeScript nâng cao không phải là sự phức tạp vì sự phức tạp, mà là sự an toàn và khả năng biểu đạt.
99~

NORMAL · advanced-typescript-patterns.md [readonly]99 lines · :q to close

2TypeScript đã trở thành tiêu chuẩn ngành cho phát triển web quy mô lớn. Mặc dù hầu hết các lập trình viên đều biết các kiến thức cơ bản về interface và type, sức mạnh thực sự nằm ở hệ thống type nâng cao. Dưới đây là 5 mẫu sẽ giúp bạn nổi bật với tư cách là một kỹ sư cao cấp.

4## 1. Generic Constraints

6Generics rất mạnh mẽ, nhưng đôi khi bạn cần giới hạn những gì có thể được truyền vào. `extends` là người bạn đồng hành của bạn ở đây.

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~

18Bằng cách đảm bảo `T` kế thừa `HasId`, chúng ta đảm bảo rằng việc truy cập `.id` bên trong hàm là an toàn.

19~

20## 2. Conditional Types

21~

22Conditional types cho phép bạn tạo các ánh xạ type không đồng nhất. Cú pháp tương tự như toán tử ba ngôi trong 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~

31Một trường hợp sử dụng thực tế là lọc các type từ một 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 cho phép bạn tạo các type mới dựa trên các type cũ bằng cách biến đổi các thuộc tính.

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~

55Bạn thậm chí có thể thêm hoặc xóa các modifier:

56~

57```typescript

58type Mutable<T> = {

59 -readonly [P in keyof T]: T[P];

60};

61```

62~

63## 4. Template Literal Types

64~

65Được giới thiệu trong TypeScript 4.1, chúng cho phép bạn thao tác trực tiếp với các kiểu chuỗi.

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~

78Điều này cực kỳ hữu ích để định kiểu cho các chuỗi tuân theo một mẫu cụ thể, như các lớp CSS hoặc tên sự kiện.

79~

80## 5. Từ khóa `infer`

81~

82Từ khóa `infer` trong conditional types cho phép bạn trích xuất type từ các type khác.

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~

94Ở đây, chúng ta yêu cầu TypeScript "suy luận" kiểu trả về `R` của một hàm và trả về nó.

95~

96## Kết luận

97~

98Thành thạo các mẫu này cho phép bạn viết các thư viện và tiện ích mạnh mẽ, mang lại trải nghiệm phát triển (DX) tuyệt vời. Mục tiêu của TypeScript nâng cao không phải là sự phức tạp vì sự phức tạp, mà là sự an toàn và khả năng biểu đạt.

99~