建网站自学DZ做的网站

建网站自学,DZ做的网站,大都会app约,自己做网站练手TypeScript 中的接口#xff08;Interface#xff09;详解 接口#xff08;interface#xff09; 是 TypeScript 中最常用、最重要的类型定义方式之一#xff0c;主要用于描述对象的形状#xff08;shape#xff09;#xff0c;定义对象应该具有哪些属性、方法及其类型…TypeScript 中的接口Interface详解接口interface是 TypeScript 中最常用、最重要的类型定义方式之一主要用于描述对象的形状shape定义对象应该具有哪些属性、方法及其类型。它是 TypeScript 类型系统的核心帮助实现结构化类型检查structural typing。1. 基本用法定义对象形状interfacePerson{name:string;age:number;}letuser:Person{name:Alice,age:30};// user { name: Bob }; // 错误缺少 age 属性// user { name: Charlie, age: 25 }; // 错误age 必须是 numberTypeScript 是结构化类型系统只要对象满足接口要求的形状即使没有显式声明implements也能赋值。letadmin{name:Eve,age:28,role:admin};// 多余属性 roleletp:Personadmin;// OKTypeScript 允许额外属性新鲜度检查例外情况见后文2. 可选属性Optional Properties使用?表示属性可选interfaceBook{title:string;author:string;pages?:number;// 可选readonlyisbn:string;// 只读见下文}letnovel:Book{title:1984,author:Orwell,isbn:978-0141036144// pages 可省略};3. 只读属性Readonly Properties使用readonly防止属性被修改interfacePoint{readonlyx:number;readonlyy:number;}letorigin:Point{x:0,y:0};// origin.x 10; // 错误只读只读数组readonly string[]或ReadonlyArraystringletnames:readonlystring[][Alice,Bob];// names.push(Charlie); // 错误4. 函数类型Function Types接口可以描述函数形状interfaceSearchFunc{(source:string,subString:string):boolean;}letmySearch:SearchFuncfunction(src,sub){returnsrc.includes(sub);};mySearch(hello,ell);// true5. 索引签名Index Signatures允许动态属性名interfaceStringDictionary{[key:string]:string;// 键为 string值为 stringlength:number;// 固定属性必须兼容索引签名类型}letdict:StringDictionary{name:Alice,job:Engineer,length:2// OKnumber 可赋值给 string宽松规则};也可以是number索引[index: number]: string6. 接口继承Extends接口可以继承一个或多个接口interfaceAnimal{name:string;}interfaceDogextendsAnimal{breed:string;bark():void;}letdog:Dog{name:Buddy,breed:Golden Retriever,bark(){console.log(Woof!);}};多继承interfaceFlyable{fly():void;}interfaceSwimmable{swim():void;}interfaceDuckextendsAnimal,Flyable,Swimmable{quack():void;}7. 接口 vs 类型别名type特性interfacetype alias定义对象形状推荐可行联合类型 / 字面量类型不支持支持原始类型映射不支持支持如 type Id string可重复声明声明合并支持同名接口会合并不支持实现类implements支持不支持class 只能 implements interface扩展方式extends交叉类型推荐定义对象/函数形状 → 用interface需要联合、映射、条件类型 → 用type8. 声明合并Declaration Merging同名接口会自动合并非常有用如扩展第三方库interfaceUser{name:string;}interfaceUser{age:number;}// 等价于interfaceUser{name:string;age:number;}letu:User{name:Tom,age:25};常用于扩展全局对象或第三方库类型。9. 混合类型Hybrid Types接口可以同时描述对象和函数少见但强大interfaceCounter{(start:number):string;// 作为函数count:number;// 属性reset():void;// 方法}letcounter:Counter((){letc0;letfnfunction(start:number){cstart;returnCount:${c};};fn.countc;fn.reset(){c0;};returnfnasCounter;})();10. 最佳实践建议建议说明对象形状优先用 interface可读性强支持声明合并可选属性放后面保持一致性只读属性用于不可变数据如 ID、配置函数类型复杂时用 interface比(params) return更清晰扩展第三方库时用 interface利用声明合并开启strict: true包括strictPropertyInitialization等小结接口速查表特性语法示例基本接口interface Person { name: string; age: number; }可选属性pages?: number;只读属性readonly id: number;函数属性greet(name: string): void;索引签名[prop: string]: any;继承interface Admin extends Person { role: string; }函数类型接口interface Fn { (x: number): string; }接口是 TypeScript 中定义对象合约的最优雅方式结合继承、声明合并等特性能极大提升大型项目的类型安全和可维护性。如果您想深入了解类实现接口implements、接口与抽象类的区别、工具类型如 Partial、Pick与接口结合或者需要实际项目示例请告诉我