同行做的好的网站,品牌设计的基本步骤,怎么制作外贸网站模板,做网站需要提供什么目录 什么是interface 示例代码 函数接口 通过接口(interface)来约束函数的基本使用 通过接口约束函数参数为函数类型 class接口 通过抽象类实现 抽象类和接口的区别 构造函数接口 接口的继承 接口继承接口 接口继承类 什么是interface 在 TypeScript 中#xff0…目录 什么是interface 示例代码 函数接口 通过接口(interface)来约束函数的基本使用 通过接口约束函数参数为函数类型 class接口 通过抽象类实现 抽象类和接口的区别 构造函数接口 接口的继承 接口继承接口 接口继承类 什么是interface 在 TypeScript 中interface接口是一种用来描述对象形状的结构化类型。与其他语言中的接口概念类似它定义了对象应该具有的属性和方法但不提供具体的实现。与类相似接口可以扩展其他接口并且可以用于描述函数类型、数组类型等数据形态。在 TypeScript 中接口非常常用因为它可以帮助开发人员更好地理解代码和规避错误提高代码的可维护性和可读性。 示例代码 interface Person {name: string;age: number; }const person: Person {name: Tom,age: 18 }; 定义了一个 Person 接口它描述了一个拥有 name 和 age 属性的对象类型。我们可以将 person 对象的类型声明为 Person并且确保它遵循了接口的结构。这样在类型检查阶段如果我们尝试为 person 对象赋值一个不符合接口的结构就会在编译时期报错。 函数接口 在 TypeScript 中我们可以使用接口来定义函数的类型。函数接口描述了函数的参数类型、返回值类型以及函数本身的结构。通过使用函数接口我们可以对函数进行类型检查和约束。 通过接口(interface)来约束函数的基本使用 interface MathFunc {(x: number, y: number): number; }const add: MathFunc (a, b) {return a b; };const multiply: MathFunc (a, b) {return a * b; }; 上面的代码定义了一个 MathFunc 函数接口它描述了接受两个 number 类型的参数并返回 number 类型的函数。然后我们可以使用该接口类型来声明变量 add 和 multiply并实现函数的定义。在变量声明时我们需要确保函数的结构与函数接口的描述一致这样就可以进行类型检查和约束。 通过接口约束函数参数为函数类型 interface searchFunction {(kw:string, pgae?:number): string[] }interface saveFunction {(data:object):void }const searchAndSave function(kw:searchFunction, save:saveFunction) {// code }searchAndSave((kw:string) {return [a, b, c] }, () {}) searchFunction 描述了一个接受一个字符串类型的关键字参数 kw 和一个可选的数字类型的页码参数 page返回一个字符串数组类型的函数。 saveFunction 描述了一个接受一个对象类型的参数 data没有返回值的函数。 接下来通过 searchAndSave 函数将这两个函数接口作为参数进行组合。searchAndSave 函数接受一个参数 kw它是一个符合 searchFunction 函数接口的函数并且接受一个参数 save它是一个符合 saveFunction 函数接口的函数。在 searchAndSave 函数的实现中可以根据需要使用这两个参数进行相应的操作。 在代码示例的最后一行调用了 searchAndSave 函数并传入了两个匿名函数作为参数。 第一个匿名函数 kw [a, b, c] 符合 searchFunction 函数接口的定义它接受一个字符串参数 kw并返回一个字符串数组。 第二个匿名函数 () {} 是一个空函数没有实现任何功能但它符合 saveFunction 函数接口的定义它接受一个对象参数 data没有返回值。 通过这种方式我们可以在调用 searchAndSave 函数时根据业务需求传入相应的函数并保证它们的参数和返回值类型的一致性。 class接口 在 TypeScript 中我们可以使用接口来描述类的结构和约束类的属性和方法。这种接口常被称为类接口class interface或者构造函数接口constructor interface。 类接口主要用于定义类的实例部分的属性和方法。通过定义类接口我们可以对类的实例进行类型检查和约束。 interface Point {x: number;y: number;move(dx: number, dy: number): void; }class MyPoint implements Point {x: number;y: number;constructor(x: number, y: number) {this.x x;this.y y;}move(dx: number, dy: number) {this.x dx;this.y dy;} }const point new MyPoint(1, 2); point.move(3, 4); console.log(point.x, point.y); // 输出: 4, 6 我们定义了一个类接口 Point它描述了一个具有 x 和 y 属性以及一个用于移动坐标的 move 方法的类。然后我们创建了一个类 MyPoint该类实现了 Point 接口。 在 MyPoint 类中我们需要确保类的实例具有 x 和 y 属性并实现了 move 方法的定义。通过实现接口我们可以在编译时检查类的实例是否符合接口的要求。 最后我们创建了一个 MyPoint 类的实例 point并进行了一次坐标的移动。我们可以看到通过类接口的约束我们可以更好地对类的结构进行定义和约束。 通过抽象类实现 抽象类是一种特殊的类它不能直接被实例化而是用于作为其他类的基类父类。抽象类可以包含抽象方法和非抽象方法并且可以提供一些基本的实现让子类来继承和扩展。 abstract class Point {abstract x: number;abstract y: number;abstract move(dx: number, dy: number): void; }class MyPoint extends Point {x: number;y: number;constructor(x: number, y: number) {super();this.x x;this.y y;}move(dx: number, dy: number) {this.x dx;this.y dy;} }const point new MyPoint(1, 2); point.move(3, 4); console.log(point.x, point.y); // 输出: 4, 6 在上面的例子中我们定义了一个抽象类 Point它包含了抽象属性 x 和 y以及抽象方法 move。抽象方法不包含具体的实现而是留给子类去实现。 然后我们创建了一个子类 MyPoint该类继承自抽象类 Point。在子类中我们必须实现抽象类中所有的抽象属性和方法。 最后我们创建了一个 MyPoint 类的实例 point并进行了一次坐标的移动。输出结果与之前的示例相同。 抽象类和接口的区别 抽象类和接口是 TypeScript 中用于定义和约束类和对象行为的关键概念它们有以下几点区别 1. 实例化: 接口不能被实例化而抽象类也不能直接被实例化只能作为其他类的基类。 2. 实现限制: 类可以实现多个接口但只能继承一个抽象类。 3. 成员实现: 接口中的成员都是抽象的没有具体的实现细节而抽象类可以包含具体的成员实现。 4. 属性和方法: 接口可以包含属性、方法、索引签名和构造签名等成员而抽象类可以包含属性、方法包括抽象方法和具体方法、构造函数和访问修饰符等成员。 5. 多态性: 抽象类可以实现多态通过在基类中定义抽象方法来强制子类必须实现该方法。而接口无法实现多态只能用于描述对象的结构。 6. 继承关系: 抽象类可以继承其他类或抽象类也可以实现接口。而接口只能继承其他接口不能直接继承类。 7. 用途: 抽象类适用于定义一些相似的子类通过继承抽象类来避免重复代码并实现代码复用。接口常用于描述对象的结构用于类型检查和约束。 抽象类主要用于定义类的共性和结构可以包含具体的实现细节而接口主要用于描述对象的结构强调规范和约束不包含具体的实现细节。 抽象类更适合用于具有相似行为的类的继承和扩展而接口更适合用于对象的类型检查和约束。 构造函数接口 构造函数接口用于描述一个类的构造函数的类型。通过构造函数接口我们可以定义类的构造函数参数的类型和返回的实例类型。 interface Point {x: number;y: number; }interface PointConstructor {new (x: number, y: number): Point; }class MyPoint implements Point {x: number;y: number;constructor(x: number, y: number) {this.x x;this.y y;} }const PointClass: PointConstructor MyPoint; const point: Point new PointClass(1, 2); console.log(point.x, point.y); // 输出: 1, 2 接口的继承 接口之间可以通过继承来建立关系使一个接口可以继承另一个或多个接口的成员。接口的继承可以通过关键字 extends 来实现。 接口继承接口 interface Box {area():number;length():number; }interface Box2 extends Box {volumn():number; }// Box3这个类需要同时实现Box和Box2中的方法 class Box3 implements Box2 {area() {return 1}length() {return 2}volumn() {return 3;} } 接口继承类 class Box {protected uname:string zs; }interface Box2 extends Box {pwd:string; }class Box3 extends Box implements Box2 {pwd:string;constructor(pwd:string) {super();this.pwd pwd}showName() {console.log(this.uname)console.log(this.pwd)} }let b new Box3(123456) b.showName() 继承接口可以实现接口之间的层次关系使得接口能够更好地组织和描述对象的结构和行为。同时这也提供了代码共享和重用的机制有助于增强代码的可读性和可维护性。