如何做企业黄页网站网站设计要点
泛型（Generics）是什么？
泛型是TypeScript中一种创建可复用、类型安全组件的工具，它允许你在定义函数、接口或类时不预先指定具体类型，而是在使用时再指定类型参数。这解决了代码复用与类型安全之间的矛盾。
为什么需要泛型？
没有泛型时，通常有两种方式处理不同类型：
- 使用
any类型（失去类型检查） - 为每种类型重复编写几乎相同的代码
泛型通过参数化类型解决了这个问题，使组件可以支持多种类型同时保持类型安全。
基本使用方法
1. 泛型函数
// 定义泛型函数，T是类型参数（可自定义名称）
function identity<T>(arg: T): T {return arg;
}// 使用时指定类型
const num: number = identity<number>(10);
const str: string = identity<string>('hello');// 类型推断（可省略显式类型）
const bool = identity(true); // 自动推断T为boolean
2. 泛型接口
// 定义泛型接口
interface Container<T> {value: T;getValue: () => T;
}// 实现时指定类型
const numberContainer: Container<number> = {value: 100,getValue: () => 100
};const stringContainer: Container<string> = {value: '泛型',getValue: () => '泛型'
};
3. 泛型类
class Stack<T> {private items: T[] = [];push(item: T): void {this.items.push(item);}pop(): T | undefined {return this.items.pop();}
}// 使用时指定类型
const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push('2'); // 错误：不能将string分配给numberconst stringStack = new Stack<string>();
stringStack.push('hello');
高级特性
1. 泛型约束
限制泛型只能是特定类型或具有特定属性：
// 约束T必须有length属性
interface Lengthwise {length: number;
}function logLength<T extends Lengthwise>(arg: T): T {console.log(arg.length);return arg;
}logLength('hello'); // 正确：string有length
logLength(10); // 错误：number没有length
2. 默认类型参数
为泛型指定默认类型：
function createArray<T = string>(length: number, value: T): T[] {return Array(length).fill(value);
}const strArray = createArray(3, 'x'); // string[]
const numArray = createArray<number>(3, 10); // number[]
3. 多类型参数
function pair<T, U>(first: T, second: U): [T, U] {return [first, second];
}const result = pair('age', 25); // [string, number]
典型应用场景
- 通用数据结构：如数组、栈、队列等
- 工具函数：如数组排序、过滤等不依赖具体类型的操作
- API响应处理：统一处理不同类型的接口返回数据
- 组件封装：React/Vue等框架中的可复用组件
泛型命名约定
T：Type（表示类型）K：Key（表示对象的键类型）V：Value（表示对象的值类型）E：Element（表示元素类型）
这些只是约定，实际可以使用任何有效名称。