说起来，

前言

大家好。我是小杨，还记得我刚学习 TypeScript 时最让我头疼的就是泛型这个概念。什么 TUK看起来像密码一样神秘。但当我真正理解并开始使用泛型后才发现它就像是 TypeScript 中的“瑞士军刀”，能让我们的代码既灵活又类型安全。

之前，我常常遇到以下几个痛点：

• 痛点一：代码重复繁琐——写同一个函数处理不同类型时需要复制粘贴多份。
• 痛点二：类型安全缺失——JavaScript 的动态特性导致运行时错误难以捕获。
• 痛点三：维护成本高——因为项目规模扩大，手工维护各种类型定义变得不可行。

今天我想和大家分享对 TypeScript 泛型的理解和实际经验，希望能帮你们解决这些痛点。

什么是泛型？从函数参数到类型参数

想象一下如果你要写一个函数。它既能处理数字，又能处理字符串，还能处理任何其他类型，你会怎么做？

// JavaScript方式 - 缺乏类型安全
function identity {
return value;}
const num = identity;// 返回42，但类型信息丢失
const str = identity;// 返回"hello"，类型信息丢失
const bool = identity;// 返回true，类型信息丢失

而在 TypeScript 中。泛型给了我们更好的方法：

// TypeScript 泛型 - 保持类型安全
function identity: T {
return value;怎么说呢，}
const num = identity;// 类型为 number
const str = identity;// 类型为 string
const bool = identity;// 类型为 boolean

这里的 就是泛型参数。它像一个“类型变量”，在函数被调用时确定具体的类型。老实说，

1️⃣ 泛型函数示例：栈实现

// 一个简单的栈实现
class Stack {
private items: T =;push: void {
this.items.push;}
从pop来看，T | undefined {
return this.items.pop;怎么说呢，}
再看peek。T | undefined {
return this.items;}
再看size，number {
return this.items.length;}
}
// 使用示例 - 类型安全！const numberStack = new Stack;numberStack.push;numberStack.push;// numberStack.push;// ❌ 编译错误：不能将字符串压入数字栈
const stringStack = new Stack;stringStack.push;stringStack.push;console.log);// 输出 "world"

2️⃣ 多个泛型参数示例：键值对包装器

// 处理键值对的函数
function pair: {
return;}
// 使用示例
const stringNumberPair = pair;怎么说呢，//
const numberBooleanPair = pair;//
const complexPair = pair;不过，//
console.log;老实说，// age
console.log;// true

3️⃣ 泛型约束示例：限制长度属性

// 要求泛型参数必须有 length 属性
interface HasLength { length: number;怎么说呢，}
function getLength: number {
return item.length;}
// 使用示例
getLength;按理说，// ✅ 字符串有 length 属性
getLength;说起来，// ✅ 数组有 length 属性
getLength;话说回来，// ✅ 对象自带 length 属性
// getLength;❌ 编译错误：数字没有 length 属性

说到实战场景。泛型在项目中的应用

从场景一来看，API 响应处理

痛点二再现——手工解析响应体导致大量重复代码和潜在错误。

// 定义通用 API 响应结构体
interface ApiResponse{
success:boolean;data:T，message?:string，老实说，timestamp:number;}
// 通用 API 请求函数
async function apiRequest(
endpoint:string,options?:RequestInit):Promise{
const response=await fetch;const result=await response.json as ApiResponse;if{
throw new Error;}
return result;}
// 定义具体的数据接口
interface User{ id:number;name:string，email:string;按理说，}
interface Product{ id:number;title:string;price:number;
}
=>{
const userResp=await apiRequest;console.log，// 正确访问属性
const productResp=await apiRequest<;console.log，});// 若尝试访问不存在属性。例如 productResp.data.invalid，编译器会报错。

场景二的观点是，工具函数库

// 数组工具函数集合
// filter 与 map 的通用实现
function filterArray=>boolean):T{
return array.filter;}
function mapArray=>U):U{
return array.map;}
// 对象工具函数
function getProperty:T{
return obj;}
function mergeObjects:{
return {...a,...b};}
// 示例演示
const nums=;console.log);//
const users=;console.log);//
type Person={name:string;height:number};console.log);console.log);//

场景三的观点是。React 状态管理

痛点三再现——状态字段多且各自不同，手写 Hook 成本高。按理说，

import {useState。useCallback} from 'react';type FormHookOptions={
initialValues:T;}，老实说，export function useForm{
 const =useState;const setValue=useCallback(
<=>{
setValues);},)，const reset=useCallback=>setValues,);return {values,setValue。resets:setValue,setValues};怎么说呢，

}

// 使用实例
interface LoginForm{
email这方面。string，password:string;rememberMe:boolean;}

export function LoginComponent{
const {values,setValue}=useForm;
 function onEmailChange{setValue;}
function onRememberToggle{setValue;}
/* setValue;❌ 编译错误 */


}


场景四这方面，高阶组件与 Render Props 

+typescript
// 带加载状态的 HOC
export function withLoading < => =>{
if return <'div'>Loading...;const {isLoading,...rest}=props as any;return <Component {...rest} />;}，

// DataRenderer 用于异步数据展示
export interface DataRendererProps {
url的观点是，string,children:=>JSX.Element|null。}

export function DataRenderer ({
url,children,}:DataRendererProps){
 const =useState;const =useState;老实说，const =useState;useEffect=>{
fetch
.n)
.n;setLoading})
.catch;setLoading});},)，if return children;if return children;ifreturn children;return null，

// 用法演示
interface UserProfileInfo{ id:number。name:string,email:string;}
export default function UserProfile{
return (
<DataRenderer{url:'/api/user'
{=>{
ifreturn <'div'>Loading user…，不过，ifreturn <'div'>Error:{error.message};ifreturn <'div'>Hello,{user.name}!，elsereturn null;} }/>
)，}



高级泛型技巧 

条件类型 

tslangtypescript code hljs=
type IsString=T extends string?'yes':'no'，type A=IsString;//'yes'
type B=IsString;//'no'

type ArrayElement=T extends?U : never，type Numbers=ArrayElement 'number'="" 'string'="";=""
<="" mixed="ArrayElement<>;//'number|string'" p="" strings="ArrayElement" type="">

映射类型 

tslangtypescript code hljs=
type Partial= {?: T }，说起来，type Readonly= { readonly : T };

interface User{ id:number。name:string,email:string;话说回来，}
type PartialUser=Partial;//
type ReadonlyUser=Readonly;//





>