ts中的接口（interface）示例代码及解释

目录

什么是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()

继承接口可以实现接口之间的层次关系，使得接口能够更好地组织和描述对象的结构和行为。同时，这也提供了代码共享和重用的机制，有助于增强代码的可读性和可维护性。