TypeScript系列04-泛型编程

本文探究TypeScript泛型编程，内容涵盖：

• 泛型根本：包罗泛型函数、接口、类和束缚，这些是构建可重用和范例安全代码的根本。
  
• 内置工具范例：把握了TypeScript提供的强大工具范例，如Partial、Required、Pick等，这些工具范例可以资助我们举行常见的范例操纵。
  
• 条件范例与推断：学习了怎样使用条件范例和infer关键字举行范例运算和推断。
  
• 实战应用：分析了Redux Toolkit中泛型的应用，展示了泛型在实际项目中的强大功能。
  

1. 泛型根本概念

泛型是TypeScript中最强大的特性之一，它答应我们创建可重用的组件，这些组件可以与多种范例一起工作，而不但限于单一范例。泛型为代码提供了范例安全的同时保持了机动性。
1.1 泛型函数与泛型接口

泛型函数使用范例参数来创建可以处理处罚多种数据范例的函数，同时保持范例安全。

以下是一个简单的泛型函数示例：

1. function identity<T>(arg: T): T {
2.     return arg;
3. }
5. // 使用方式
6. const output1: string = identity<string>("hello");
7. const output2: number = identity<number>(42);
8. const output3: boolean = identity(true); // 类型参数推断为 boolean

复制代码

泛型接口使我们可以大概界说可实用于多种范例的接口结构：

1. interface GenericBox<T> {
2.     value: T;
3.     getValue(): T;
4. }
6. // 实现泛型接口
7. class StringBox implements GenericBox<string> {
8.     value: string;
9.    
10.     constructor(value: string) {
11.         this.value = value;
12.     }
13.    
14.     getValue(): string {
15.         return this.value;
16.     }
17. }
19. class NumberBox implements GenericBox<number> {
20.     value: number;
21.    
22.     constructor(value: number) {
23.         this.value = value;
24.     }
25.    
26.     getValue(): number {
27.         return this.value;
28.     }
29. }

复制代码

1.2 泛型类与泛型束缚

泛型类答应我们创建可以处理处罚多种数据范例的类界说：

1. class DataContainer<T> {
2.     private data: T[];
3.    
4.     constructor() {
5.         this.data = [];
6.     }
7.    
8.     add(item: T): void {
9.         this.data.push(item);
10.     }
11.    
12.     getItems(): T[] {
13.         return this.data;
14.     }
15. }
17. // 使用泛型类
18. const stringContainer = new DataContainer<string>();
19. stringContainer.add("Hello");
20. stringContainer.add("World");
21. const strings = stringContainer.getItems(); // 类型为 string[]
23. const numberContainer = new DataContainer<number>();
24. numberContainer.add(10);
25. numberContainer.add(20);
26. const numbers = numberContainer.getItems(); // 类型为 number[]

复制代码

泛型束缚使我们可以限定范例参数必须具有特定属性或结构，进步范例安全性：

1. interface Lengthwise {
2.     length: number;
3. }
5. // 泛型约束：T 必须符合 Lengthwise 接口
6. function getLength<T extends Lengthwise>(arg: T): number {
7.     return arg.length; // 安全，因为我们保证 T 有 length 属性
8. }
10. getLength("Hello"); // 字符串有 length 属性，可以正常工作
11. getLength([1, 2, 3]); // 数组有 length 属性，可以正常工作
12. // getLength(123); // 错误！数字没有 length 属性

复制代码

1.3 默认范例参数

TypeScript 答应为泛型范例参数提供默认值，雷同于函数参数的默认值：

1. interface ApiResponse<T = any> {
2.     data: T;
3.     status: number;
4.     message: string;
5. }
7. // 没有指定类型参数，使用默认值 any
8. const generalResponse: ApiResponse = {
9.     data: "some data",
10.     status: 200,
11.     message: "Success"
12. };
14. // 明确指定类型参数
15. const userResponse: ApiResponse<User> = {
16.     data: { id: 1, name: "John Doe" },
17.     status: 200,
18.     message: "User retrieved successfully"
19. };
21. interface User {
22.     id: number;
23.     name: string;
24. }

复制代码

2. 泛型工具范例详解

TypeScript 提供了很多内置的泛型工具范例，它们可以资助我们实验常见的范例转换。这些工具范例都是基于泛型构建的，展示了泛型的强大功能。

2.1 Partial, Required, Readonly

这组工具范例紧张用于修改对象范例的属性特性：

1. interface User {
2.     id: number;
3.     name: string;
4.     email: string;
5.     role: 'admin' | 'user';
6.     createdAt: Date;
7. }
9. // Partial<T> - 将所有属性变为可选
10. type PartialUser = Partial<User>;
11. // 等同于:
12. // {
13. //   id?: number;
14. //   name?: string;
15. //   email?: string;
16. //   role?: 'admin' | 'user';
17. //   createdAt?: Date;
18. // }
20. // 更新用户时，我们只需要提供要更新的字段
21. function updateUser(userId: number, userData: Partial<User>): Promise<User> {
22.     // 实现省略
23.     return Promise.resolve({} as User);
24. }
26. // Required<T> - 将所有可选属性变为必需
27. interface PartialConfig {
28.     host?: string;
29.     port?: number;
30.     protocol?: 'http' | 'https';
31. }
33. type CompleteConfig = Required<PartialConfig>;
34. // 等同于:
35. // {
36. //   host: string;
37. //   port: number;
38. //   protocol: 'http' | 'https';
39. // }
41. // Readonly<T> - 将所有属性变为只读
42. type ReadonlyUser = Readonly<User>;
43. // 等同于:
44. // {
45. //   readonly id: number;
46. //   readonly name: string;
47. //   readonly email: string;
48. //   readonly role: 'admin' | 'user';
49. //   readonly createdAt: Date;
50. // }
52. const user: ReadonlyUser = {
53.     id: 1,
54.     name: "John Doe",
55.     email: "john@example.com",
56.     role: "user",
57.     createdAt: new Date()
58. };
60. // 错误：无法分配到"name"，因为它是只读属性
61. // user.name = "Jane Doe";

复制代码

2.2 Record<K,T>, Pick<T,K>, Omit<T,K>

这组工具范例紧张用于构造或提取对象范例：

1. // Record<K,T> - 创建一个具有类型 K 的键和类型 T 的值的对象类型
2. type UserRoles = Record<string, 'admin' | 'editor' | 'viewer'>;
3. // 等同于:
4. // {
5. //   [key: string]: 'admin' | 'editor' | 'viewer'
6. // }
8. const roles: UserRoles = {
9.     'user1': 'admin',
10.     'user2': 'editor',
11.     'user3': 'viewer'
12. };
14. // 特别有用的情况：创建映射对象
15. type UserIds = 'user1' | 'user2' | 'user3';
16. const permissionsByUser: Record<UserIds, string[]> = {
17.     user1: ['read', 'write', 'delete'],
18.     user2: ['read', 'write'],
19.     user3: ['read']
20. };
22. // Pick<T,K> - 从类型 T 中选择指定的属性 K
23. type UserProfile = Pick<User, 'name' | 'email'>;
24. // 等同于:
25. // {
26. //   name: string;
27. //   email: string;
28. // }
30. // 非常适合生成表单或API相关的数据结构
31. function getUserProfile(user: User): UserProfile {
32.     return {
33.         name: user.name,
34.         email: user.email
35.     };
36. }
38. // Omit<T,K> - 从类型 T 中排除指定的属性 K
39. type UserWithoutSensitiveInfo = Omit<User, 'id' | 'createdAt'>;
40. // 等同于:
41. // {
42. //   name: string;
43. //   email: string;
44. //   role: 'admin' | 'user';
45. // }
47. // 创建新用户输入表单，去除自动生成的字段
48. function createUserFromForm(userData: UserWithoutSensitiveInfo): User {
49.     return {
50.         ...userData,
51.         id: generateId(), // 假设的函数
52.         createdAt: new Date()
53.     };
54. }

复制代码

2.3 Extract<T,U>, Exclude<T,U>, NonNullable

这组工具范例紧张用于团结范例的操纵：

1. // 定义一些联合类型
2. type Species = 'cat' | 'dog' | 'bird' | 'fish' | 'reptile';
3. type Mammals = 'cat' | 'dog';
5. // Extract<T,U> - 从 T 中提取可赋值给 U 的类型
6. type MammalsFromSpecies = Extract<Species, Mammals>;
7. // 结果: 'cat' | 'dog'
9. // 更实用的例子
10. type ApiResponse =
11.     | { status: 'success'; data: any }
12.     | { status: 'error'; error: string }
13.     | { status: 'loading' };
15. type SuccessResponse = Extract<ApiResponse, { status: 'success' }>;
16. // 结果: { status: 'success'; data: any }
18. // Exclude<T,U> - 从 T 中排除可赋值给 U 的类型
19. type NonMammals = Exclude<Species, Mammals>;
20. // 结果: 'bird' | 'fish' | 'reptile'
22. // 排除所有错误状态
23. type NonErrorResponses = Exclude<ApiResponse, { status: 'error' }>;
24. // 结果: { status: 'success'; data: any } | { status: 'loading' }
26. // NonNullable<T> - 从 T 中排除 null 和 undefined
27. type MaybeString = string | null | undefined;
28. type DefinitelyString = NonNullable<MaybeString>;
29. // 结果: string
31. // 使用场景：过滤数组中的非空值
32. function filterNonNullable<T>(array: Array<T | null | undefined>): Array<NonNullable<T>> {
33.     return array.filter((item): item is NonNullable<T> => item !== null && item !== undefined) as Array<NonNullable<T>>;
34. }
36. const mixedArray = ['hello', null, 'world', undefined, '!'];
37. const filteredArray = filterNonNullable(mixedArray);
38. // 结果: ['hello', 'world', '!']

复制代码

3. 条件范例与范例推断 - infer 关键字

条件范例是TypeScript中最强大的范例构造之一，它答应我们基于范例关系创建条件逻辑。

infer 关键字，它答应我们声明一个范例变量，用于捕捉和提取符合特定模式的范例。简单来说，它让我们可以大概从复杂范例中"提取"出我们关心的部门。
根本语法

1. type ExtractSomething<T> = T extends Pattern_with_infer_X ? X : Fallback;

复制代码

在这个模式中：

• T是我们要查抄的范例
  
• Pattern_with_infer_X是包罗infer X声明的模式
  
• 如果T符合该模式，结果范例就是我们提取出的X
  
• 否则，结果范例为Fallback
  

简单示例：提取函数返回范例

1. // 定义一个提取函数返回类型的工具类型
2. type ReturnTypeOf<T> = T extends (...args: any[]) => infer R ? R : any;
4. // 一个简单的函数
5. function getUsername(): string {
6.   return "张三";
7. }
9. // 提取函数的返回类型
10. type Username = ReturnTypeOf<typeof getUsername>; // 结果: string

复制代码

infer的本质是举行模式匹配。就像我们辨认笔墨或图像一样，它根据预设的模式来找到并"捕捉"范例中的特定部门。
这就似乎我们看到"159****1234"如许的号码，立刻就能辨认出这是一个手机号，而且知道中央的星号部门是隐蔽的数字。infer在范例天下做的变乱与此雷同——它根据上下文模式自动推断出被省略或隐蔽的范例部门。
4. 案例：泛型在Redux Toolkit中的应用

Redux Toolkit是Redux的官方保举工具集，它大量使用了TypeScript的泛型来提供范例安全的状态管理。让我们看看它怎样使用泛型：

下面我们将看看Redux Toolkit中的泛型应用，并实现一个简单的TodoList应用：

1. import {
2.   createSlice,
3.   createAsyncThunk,
4.   PayloadAction,
5.   configureStore
6. } from '@reduxjs/toolkit';
8. // 1. 定义类型
9. interface Todo {
10.   id: number;
11.   text: string;
12.   completed: boolean;
13. }
15. interface TodosState {
16.   items: Todo[];
17.   status: 'idle' | 'loading' | 'succeeded' | 'failed';
18.   error: string | null;
19. }
21. // 2. 使用createAsyncThunk泛型
22. // createAsyncThunk<返回值类型, 参数类型, { rejectValue: 错误类型 }>
23. export const fetchTodos = createAsyncThunk
24.   Todo[],
25.   void,
26.   { rejectValue: string }
27. >('todos/fetchTodos', async (_, { rejectWithValue }) => {
28.   try {
29.     const response = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=10');
30.     if (!response.ok) {
31.       return rejectWithValue('Failed to fetch todos.');
32.     }
33.     return await response.json();
34.   } catch (error) {
35.     return rejectWithValue(error instanceof Error ? error.message : 'Unknown error');
36.   }
37. });
39. // 3. 使用createSlice泛型来创建切片
40. // createSlice<状态类型>
41. const todosSlice = createSlice({
42.   name: 'todos',
43.   initialState: {
44.     items: [],
45.     status: 'idle',
46.     error: null
47.   } as TodosState,
48.   reducers: {
49.     // PayloadAction<载荷类型> 增强了action的类型安全
50.     addTodo: (state, action: PayloadAction<string>) => {
51.       const newTodo: Todo = {
52.         id: Date.now(),
53.         text: action.payload,
54.         completed: false
55.       };
56.       state.items.push(newTodo);
57.     },
58.     toggleTodo: (state, action: PayloadAction<number>) => {
59.       const todo = state.items.find(item => item.id === action.payload);
60.       if (todo) {
61.         todo.completed = !todo.completed;
62.       }
63.     },
64.     removeTodo: (state, action: PayloadAction<number>) => {
65.       state.items = state.items.filter(item => item.id !== action.payload);
66.     }
67.   },
68.   extraReducers: (builder) => {
69.     // 处理异步action状态
70.     builder
71.       .addCase(fetchTodos.pending, (state) => {
72.         state.status = 'loading';
73.       })
74.       .addCase(fetchTodos.fulfilled, (state, action: PayloadAction<Todo[]>) => {
75.         state.status = 'succeeded';
76.         state.items = action.payload;
77.       })
78.       .addCase(fetchTodos.rejected, (state, action) => {
79.         state.status = 'failed';
80.         state.error = action.payload || 'Unknown error';
81.       });
82.   }
83. });
85. // 4. 导出actions
86. export const { addTodo, toggleTodo, removeTodo } = todosSlice.actions;
88. // 5. 配置store
89. const store = configureStore({
90.   reducer: {
91.     todos: todosSlice.reducer
92.   }
93. });
95. // 6. 从store中提取RootState和AppDispatch类型
96. export type RootState = ReturnType<typeof store.getState>;
97. export type AppDispatch = typeof store.dispatch;
99. // 7. 强类型的Hooks
100. import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
102. // 为useDispatch和useSelector创建强类型的版本
103. export const useAppDispatch = () => useDispatch<AppDispatch>();
104. export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
106. // 8. 在组件中使用
107. import React, { useEffect, useState } from 'react';
108. import { useAppDispatch, useAppSelector } from './store';
109. import { addTodo, toggleTodo, removeTodo, fetchTodos } from './todosSlice';
111. const TodoApp: React.FC = () => {
112.   const [newTodo, setNewTodo] = useState('');
113.   const dispatch = useAppDispatch();
114.   
115.   // 强类型的selector，IDE可以提供自动完成
116.   const { todos, status, error} = useAppSelector(state => state.todos);
117.   
118.   useEffect(() => {
119.     if (status === 'idle') {
120.       dispatch(fetchTodos());
121.     }
122.   }, [status, dispatch]);
123.   
124.   const handleAddTodo = (e: React.FormEvent) => {
125.     e.preventDefault();
126.     if (newTodo.trim()) {
127.       dispatch(addTodo(newTodo));
128.       setNewTodo('');
129.     }
130.   };
131.   
132.   if (status === 'loading') {
133.     return <div>Loading...</div>;
134.   }
135.   
136.   if (status === 'failed') {
137.     return <div>Error: {error}</div>;
138.   }
139.   
140.   return (
141.     <div>
142.       <h1>Todo List</h1>
143.       
144.       <form onSubmit={handleAddTodo}>
145.         <input
146.           type="text"
147.           value={newTodo}
148.           onChange={(e) => setNewTodo(e.target.value)}
149.           placeholder="Add a new todo"
150.         />
151.         <button type="submit">Add</button>
152.       </form>
153.       
154.       <ul>
155.         {todos.map(todo => (
156.           <li
157.             key={todo.id}
158.             style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
159.           >
160.             <span onClick={() => dispatch(toggleTodo(todo.id))}>
161.               {todo.text}
162.             </span>
163.             <button onClick={() => dispatch(removeTodo(todo.id))}>
164.               Delete
165.             </button>
166.           </li>
167.         ))}
168.       </ul>
169.     </div>
170.   );
171. };
173. export default TodoApp;

复制代码

Redux Toolkit中的泛型带来的长处：

• 范例安全的Actions：通过PayloadAction<T>泛型，确保了action的载荷范例精确。
  
• 范例安全的Thunks：createAsyncThunk<返回值范例, 参数范例, 选项>泛型确保了异步操纵的范例安全。
  
• 范例安全的State访问：通过RootState范例和强范例的selector hooks，确保了状态的范例安全访问。
  
• 智能的自动完成：由于范例体系的存在，IDE可以提供更好的自动完乐成能。
  
• 编译时错误查抄：错误在编译时而非运行时被捕捉。
  

这些高级泛型技能使Redux Toolkit可以大概提供精良的开辟体验，尤其在大型应用中尤为紧张。
总结

泛型是TypeScript最强大的特性之一，把握泛型可以资助我们写出更机动、更可重用、更范例安全的代码。随着TypeScript的不停发展，泛型的应用将变得越来越广泛和紧张。通过深入明确泛型，我们可以充实使用TypeScript的范例体系，进步代码质量和开辟服从。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告