dede 添加演示网站做网站 做app好

dede 添加演示网站,做网站 做app好,网站设计就业怎么样,免费微信商城系统TypeScript 泛型#xff08;Generics#xff09;详解 泛型#xff08;Generics#xff09; 是 TypeScript 最强大、最核心的特性之一。它允许你创建可重用、类型安全的组件#xff0c;在不牺牲类型检查的前提下#xff0c;让函数、类、接口等能够处理多种类型#xff0…TypeScript 泛型Generics详解泛型Generics是 TypeScript 最强大、最核心的特性之一。它允许你创建可重用、类型安全的组件在不牺牲类型检查的前提下让函数、类、接口等能够处理多种类型而不是固定为某种特定类型。泛型的核心思想“类型变量”—— 用占位符如T表示类型在使用时再指定具体类型。1. 泛型函数Generic Functions基础示例身份函数Identity Function// 普通函数无泛型functionidentity(arg:number):number{returnarg;}// 使用 any失去类型安全functionidentityAny(arg:any):any{returnarg;}// let output: string identityAny(123); // 不会报错但不安全// 泛型版本推荐functionidentityT(arg:T):T{returnarg;}// 使用时指定类型letnumOutput:numberidentitynumber(123);letstrOutput:stringidentitystring(hello);// 或依靠类型推断最常用letboolOutputidentity(true);// 类型自动推断为 boolean多个泛型参数functionmergeT,U(obj1:T,obj2:U):TU{return{...obj1,...obj2};}letmergedmerge({name:Alice},{age:30});// merged 类型{ name: string; } { age: number; } → { name: string; age: number; }2. 泛型接口Generic InterfacesinterfaceGenericArrayT{items:T[];add(item:T):void;get(index:number):T;}// 使用letnumberArray:GenericArraynumber{items:[1,2,3],add(item){this.items.push(item);},get(index){returnthis.items[index];}};letstringArray:GenericArraystring{items:[a,b],add(item){this.items.push(item);},get(index){returnthis.items[index];}};3. 泛型类Generic ClassesclassBoxT{privatecontent:T;constructor(initial:T){this.contentinitial;}set(value:T):void{this.contentvalue;}get():T{returnthis.content;}}// 使用letnumberBoxnewBoxnumber(100);numberBox.set(200);console.log(numberBox.get());// 200letstringBoxnewBoxstring(hello);stringBox.set(world);// stringBox.set(123); // 错误类型不匹配4. 泛型约束Constraints—— 限制 T 的范围默认情况下T可以是任何类型有时需要限制它具有某些属性。// 约束 T 必须有 length 属性functionprintLengthTextends{length:number}(arg:T):void{console.log(arg.length);}printLength(hello);// OKprintLength([1,2,3]);// OKprintLength({length:10,value:5});// OK// printLength(123); // 错误number 没有 length使用 keyof 约束键functiongetPropertyT,KextendskeyofT(obj:T,key:K):T[K]{returnobj[key];}letperson{name:Alice,age:30};letnamegetProperty(person,name);// 类型stringletagegetProperty(person,age);// 类型number// getProperty(person, email); // 错误email 不存在5. 默认泛型参数Default Type ParametersTS 2.3interfaceApiResponseTany{data:T;status:number;}// 使用时可省略letresponse:ApiResponse{data:ok,status:200};// 或指定letjsonResponse:ApiResponsestring[]{data:[a,b],status:200};6. 常见泛型应用场景场景示例数组工具函数function firstT(arr: T[]): TPromisePromiseTTS 内置React 组件function ListT(props: { items: T[] })类型安全的工厂函数function createT(c: new () T): T映射类型type PartialT { [K in keyof T]?: T[K] }7. 内置泛型工具类型Utility TypesTypeScript 自带大量基于泛型的工具类型类型作用示例PartialT所有属性可选PartialUserRequiredT所有属性必选ReadonlyT所有属性只读PickT, K挑选属性PickUser, “name”OmitT, K排除属性OmitUser, passwordRecordK, T创建键值对象类型Recordstring, numberReturnTypeT获取函数返回值类型ReturnTypetypeof fetchParametersT获取函数参数元组8. 最佳实践建议建议说明优先让 TS 自动推断泛型如identity(hi)而非identitystring(hi)使用约束避免过度宽松T extends { id: number }等泛型函数名后写T保持一致性避免泛型嵌套过深可读性优先结合接口/类使用泛型构建可复用组件多用内置工具类型减少手动编写复杂类型小结泛型速查表写法含义function fnT(arg: T): T基本泛型函数T extends U约束 T 必须继承 UK extends keyof T键约束class BoxT泛型类interface ListT泛型接口PromiseT内置泛型示例PartialT工具类型示例泛型是 TypeScript 从“类型安全脚本语言”提升为“工业级类型系统”的关键。掌握泛型后你可以编写高度可复用、类型严谨的库和应用如 React、NestJS、RxJS 等都大量使用泛型。如果您想看更多实战示例如泛型组件在 React 中的使用、高级条件泛型、泛型递归类型或者需要一个完整的泛型工具库示例请告诉我