接口的作用

面向对象的编程中，接口是一种规范的定义，定义了行为和动作的规范，在程序设计中，接口起到限制和规范的作用
接口定义了某一批类说需要遵守的规范，接口不关心这些类的内部数据状态，也不关心类里面方法的实现细节，他只规定了这批内里面必须提供的某些方法提供这些方法的类就可以满足实际需要

属性类型接口

  • ts 接口对方法的参数进行约束
1
2
3
4
5
6
7
// 要求info必须包含label属性
function printLabel(info: { label: string }): void {
  console.log(info);
}
printLabel("xxx"); // error
printlabel({ name: "xxx" }); //  error
printLabel({ label: "xxx" }); //  right
  • 对批量方法进行约束
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 定义接口
interface FullName {
  // 结尾要用;
  firstName: string;
  lastName: string;
}
function printName(name: FullName) {
  console.log(name.firstName + " " + name.lastName);
}
var name = {
  firstName: "ayase",
  lastName: "miya",
  age: 16,
};
printName(name); // ok
printName({ firstName: "ayase", lastName: "miya" }); // ok
printName({ firstName: "ayase", lastName: "miya", age: 16 }); // error

function printInfo(name: FullName) {
  console.log(name.firstName + " " + name.lastName);
  console.log(name.age); // error
}
  • 接口的可选参数
1
2
3
4
5
6
7
8
9
10
11
12
13
//  接口的可选参数------------------------------
interface FullName {
  firstName: string;
  lastName: string;
  age?: number;
}
function printInfo(name: FullName) {
  console.log(name.firstName + " " + name.lastName);
  console.log(name.age); // ok
}
printInfo({ firstName: "ayase", lastName: "miya" }); // ok
printInfo({ firstName: "ayase", lastName: "miya", age: 16 }); // ok
printInfo({ firstName: "ayase", age: 16 }); // error

函数类型接口

  • ts 接口对函数进行约束
1
2
3
4
5
6
7
interface FullName {
  (firstName: string, lastName: string):string;
}
var name:FullName = function (firstName:string, lastName:string):string{
  return firstName + lastName
}
console.log(name('ayase', 'miya))

可索引接口

  • ts 接口对数组，对象进行约束
1
2
3
4
5
6
7
8
9
10
11
//  约束数组-------------------
interface Arr {
  [index: number]: string;
}
var arr1: Arr = ["aaa", "bbb"];
var arr2: Arr = [123, "bbb"]; // error
//  约束对象----------------------------
interface Obj {
  [index: string]: string;
}
var obj1: Obj = { name: "aaa" };

类类型接口

  • ts 对类进行约束
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface Animal {
  name: string;
  eat(str: string): void;
}
// implements
class Dog implements Animal {
  // 必须包含name和eat
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  eat() {
    console.log("吃" + this.name);
  }
}
var dog = Dog("饭");
dog.eat(); // 吃饭

接口的拓展

  • 接口可以继承接口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
interface Animal {
  eat(): void;
}
// 接口通过extend继承其他接口
interface Person extends Animal {
  work(): void;
}
// Person接口约束Web类 Web需要实现Person和Animal的方法
class Web implements Person {
  public name: string;
  constructor(name: name) {
    this.name = name;
  }
  eat() {
    console.log(this.name + "吃");
  }
  work() {
    console.log(this.name + "干活");
  }
}

var web = new Web("Boku");