企业官网建设流程全解析

网站右键禁止,9个常用的wordpress sql查询命令,公司网站赏析,德朋推广前言 简单来说#xff0c;Interface 就是一种描述对象或函数的东西。 您可以把 interface 理解为形状#xff0c;真实开发情况下#xff0c;一个对象需要有什么样的属性#xff0c;函数需要什么参数或返回什么样的值#xff0c;数组应该是什么样子的#xff0c;一个类和继…前言简单来说Interface 就是一种描述对象或函数的东西。您可以把 interface 理解为形状真实开发情况下一个对象需要有什么样的属性函数需要什么参数或返回什么样的值数组应该是什么样子的一个类和继承类需要符合什么样的描述等。本文分为七个部分对象接口、函数接口、可索引类型接口、类接口是如何定义的以及接口的继承、定义混合类型的接口和继承类的接口如何使用。Interface 对象定义一个 Interface 对象一般分为以下步骤设置需要存在的普通属性设置可选属性设置只读属性接受其他额外属性通过 as 关键字或[propName: string]: any来制定来看个简单的示例注意看注释// 按上面步骤规定形状interfacePerson{name:stringbool?:booleanreadonlytimestamp:numberreadonlyarr:ReadonlyArraynumber// 此外还有 ReadonlyMap/ReadonlySet}// 正确示例letp1:Person{name:oliver,bool:true,// ✔️️ 可以设置可选属性 并非必要的 可写可不写timestamp:newDate(),// ✔️ 设置只读属性arr:[1,2,3]// ✔️ 设置只读数组}// 错误示例letp:Person{age:oliver,// ❌ 多出来的属性name:123// ❌ 类型错误}// 错误示例p1.timestamp123// ❌ 只读属性不可修改p1.arr.pop()// ❌ 只读属性不可修改Interface 函数Interface 还可以用来规范函数的形状。Interface 里面需要列出参数列表返回值类型的函数定义如下步骤定义了一个函数接口接口接收三个参数并且不返回任何值使用函数表达式来定义这种形状的函数// 按上面步骤规定形状interfaceFunc{// 定于这个函数接收两个必选参数都是 number 类型以及一个可选的字符串参数 desc// 另外这个函数不返回任何值(x:number,y:number,desc?:string):void}// 正确示例constsum:Funcfunction(x,y,desc){// const sum: Func function (x: number, y: number, desc: string): void {// ts类型系统默认推论可以不必书写上述类型定义console.log(desc,xy)}// 测试调用sum(32,22)Interface 可索引类型这种 Interface 描述了索引类型的形状规定索引返回的值的类型如下代码所示interfaceStringSet{readonly[index:number]:string// ❗ 需要注意的是 index 只能为 number 类型或 string 类型length:number// ✔️ 还可以指定属性}letarr1:StringSet[hello,world]arr1[1]// ✔️ 可以设置为只读防止给索引赋值letarr:StringSet[23,12,3,21]// ❌ 数组应为 string 类型Interface 类Interface 也可以用来定义一个类的形状。需要注意的是类 Interface 只会检查实例的属性静态属性是需要额外定义一个 Interface如下代码所示// PersonConstructor 是用来检查静态部分的interfacePersonConstructor{new(name:string,age:number)// ✔️ 这个是用来检查 constructor 的typename:string// ✔️ 这个是用来检查静态属性 typename 的logname():void// ✔️ 这个用来检查静态方法 logname 的}// PersonInterface 则是用来检查实例部分的interfacePersonInterface{// new (name: string, age: number) // ❌ 静态方法的检查也不能写在这里 这样写是错误的log():void// : 这里定义了实例方法 log}// class Person implements PersonInterface, PersonInterface { ❌ 这样写是错误的constPerson:PersonConstructorclassPersonimplementsPersonInterface{name:stringage:numberstatictypenamePerson type// 这里定义了一个名为 typename 的静态属性staticlogname(){// 这里定义了一个名为 logname 的静态方法console.log(this.typename)}constructor(name:string,age:number){// constructor 也是静态方法this.namenamethis.ageage}log(){// log 是实例方法console.log(this.name,this.age)}}Interface 的继承跟 class 一样使用 extens 继承更新新的形状。比方说继承接口并生成新的接口这个新的接口可以设定一个新的方法检查如下代码所示interfacePersonInfoInterface{// 1️⃣ 这里是第一个接口name:stringage:numberlog?():void}interfaceStudentextendsPersonInfoInterface{// 2️⃣ 这里继承了一个接口doHomework():boolean// ✔️ 新增一个方法检查}interfaceTeacherextendsPersonInfoInterface{// 3️⃣ 这里又继承了一个接口dispatchHomework():void// ✔️ 新增了一个方法检查}// interface Emmm extends Student, Teacher // 也可以继承多个接口letAlice:Teacher{name:Alice,age:34,dispatchHomework(){// ✔️ 必须满足继承的接口规范console.log(dispatched)}}letoliver:Student{name:oliver,age:12,log(){console.log(this.name,this.age)},doHomework(){// ✔️ 必须满足继承的接口规范returntrue}}混合类型的 Interface混合类型的接口就是使用同一个 Interface 来描述函数或者对象的属性或方法。比如一个函数接收什么参数输出什么结果同时这个函数有另外什么方法或属性之类的如下代码所示interfaceCounter{(start:number):void// 1️⃣ 如果只有这一个那么这个接口是函数接口add():void// 2️⃣ 这里还有一个方法那么这个接口就是混合接口log():number// 3️⃣ 这里还有另一个方法}functiongetCounter():Counter{// ⚠️ 它返回的函数必须符合接口的三点letcount0functioncounter(start:number){countstart}// counter 方法函数counter.addfunction(){count}// add 方法增加 countcounter.logfunction(){returncount}// log 方法打印 countreturncounter}constcgetCounter()c(10)// count 默认为 10c.add()console.log(c.log())继承类的 InterfaceInterface 不仅能够继承 Interface 还能够继承类再创建子类的过程中满足接口的描述就会必然满足接口继承的类的描述。classPerson{type:string// ❗️这里是类的描述}interfaceChildextendsPerson{// ❗️Child 接口继承自 Person 类因此规范了 type 属性log():void// 这里其实有一个 type: string}// ⚠️ 上面的 Child 接口继承了 Person 对 type 的描述还定义了 Child 接口本身 log 的描述// 第一种写法classGirlimplementsChild{type:child// 接口继承自 Person 的log(){}// 接口本身规范的}// 第二种写法classBoyextendsPersonimplementsChild{// 首先 extends 了 Person 类然后还需满足 Child 接口的描述type:childlog(){}}这个接口的定义和使用如下图所示