TypeScript 中的接口

发表于 更新于 分类于

接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。 typescrip 中的接口类似于 java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。
定义标准。

属性接口

对 json 的约束

ts 中定义方法

1
2
3
4
function printLabel(): void {
  console.log("printLabel");
}
printLabel();

ts 中定义方法传入参数

1
2
3
4
5
function printLabel(label: string): void {
  console.log("printLabel");
}

printLabel("hahah");

ts 中自定义方法传入参数, 对 json 进行约束;

1
2
3
4
5
6
7
8
9
function printLabel(labelInfo: { label: string }): void {
  console.log("printLabel");
}

printLabel("hahah"); //错误写法

printLabel({ name: "张三" }); //错误的写法

printLabel({ label: "张三" }); //正确的写法

对批量方法传入参数进行约束

接口：行为和动作的规范，对批量方法进行约束

就是传入对象的约束 属性接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface FullName {
  firstName: string; //注意;结束
  secondName: string;
}

function printName(name: FullName) {
  // 必须传入对象  firstName  secondName
  console.log(name.firstName + "--" + name.secondName);
}
// printName('1213');  //错误

var obj = {
  /*传入的参数必须包含 firstName  secondName*/ age: 20,
  firstName: "张",
  secondName: "三"
};
printName(obj);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
interface FullName {
  firstName: string; //注意;结束
  secondName: string;
}

function printName(name: FullName) {
  // 必须传入对象  firstName  secondName
  console.log(name.firstName + "--" + name.secondName);
}

function printInfo(info: FullName) {
  // 必须传入对象  firstName  secondName
  console.log(info.firstName + info.secondName);
}

var obj = {
  /*传入的参数必须包含 firstName  secondName*/ age: 20,
  firstName: "张",
  secondName: "三"
};
printName(obj);

printInfo({
  firstName: "李",
  secondName: "四"
});

可选属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
interface FullName {
  firstName: string;
  secondName: string;
}

function getName(name: FullName) {
  console.log(name);
}
//参数的顺序可以不一样
getName({
  secondName: "secondName",
  firstName: "firstName"
});

interface FullName {
  firstName: string;
  secondName?: string;
}

function getName(name: FullName) {
  console.log(name);
}
getName({
  firstName: "firstName"
});

例： 对 ajax 请求参数的定义

1
2
3
4
5
6
$.ajax({
  type: "GET",
  url: "test.json",
  data: { username: $("#username").val(), content: $("#content").val() },
  dataType: "json"
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
interface Config {
  type: string;
  url: string;
  data?: string;
  dataType: string;
}

// 原生js封装的ajax
function ajax(config: Config) {
  var xhr = new XMLHttpRequest();

  xhr.open(config.type, config.url, true);

  xhr.send(config.data);

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log("chengong");

      if (config.dataType == "json") {
        console.log(JSON.parse(xhr.responseText));
      } else {
        console.log(xhr.responseText);
      }
    }
  };
}

ajax({
  type: "get",
  data: "name=zhangsan",
  url: "http://a.itying.com/api/productlist", //api
  dataType: "json"
});

函数类型接口

对方法传入的参数 以及返回值进行约束 批量约束

加密的函数类型接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface encrypt {
  (key: string, value: string): string;
}

var md5: encrypt = function (key: string, value: string): string {
  // 模拟操作
  return key + value;
};

console.log(md5("name", "zhangsan"));

var sha1: encrypt = function (key: string, value: string): string {
  // 模拟操作
  return key + "----" + value;
};

console.log(sha1("name", "lisi"));

可索引接口：数组、对象的约束 （不常用）

ts 定义数组的方式

1
2
3
var arr: number[] = [2342, 235325];

var arr1: Array<string> = ["111", "222"];

可索引接口 对数组的约束

1
2
3
4
5
6
7
8
9
10
11
interface UserArr {
  [index: number]: string;
}

// var arr:UserArr=['aaa','bbb'];

// console.log(arr[0]);

var arr: UserArr = [123, "bbb"]; /*错误*/

console.log(arr[0]);

可索引接口 对对象的约束

1
2
3
4
5
interface UserObj {
  [index: string]: string;
}

var arr: UserObj = { name: "张三" };

类类型接口

对类的约束 和 抽象类抽象有点相似

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
interface Animal {
  name: string;
  eat(str: string): void;
}

class Dog implements Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  eat() {
    console.log(this.name + "吃粮食");
  }
}

var d = new Dog("小黑");
d.eat();

class Cat implements Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  // 类型“Cat”中的属性“eat”不可分配给基类型“Animal”中的同一属性。
  // 不能将类型“(food: string) => void”分配给类型“{ (str: string): void; (): void; (): void; }”。
  eat(food: string) {
    console.log(this.name + "吃" + food);
  }
}

var c = new Cat("小花");
c.eat("老鼠");

接口扩展

接口可以继承接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
interface Animal {
  eat(): void;
}

interface Person extends Animal {
  work(): void;
}

class Web implements Person {
  public name: string;
  constructor(name: string) {
    this.name = name;
  }

  eat() {
    console.log(this.name + "喜欢吃馒头");
  }
  work() {
    console.log(this.name + "写代码");
  }
}

var w = new Web("小李");

w.eat();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
interface Animal {
  eat(): void;
}

interface Person extends Animal {
  work(): void;
}

class Programmer {
  public name: string;
  constructor(name: string) {
    this.name = name;
  }

  coding(code: string) {
    console.log(this.name + code);
  }
}

class Web extends Programmer implements Person {
  constructor(name: string) {
    super(name);
  }
  eat() {
    console.log(this.name + "喜欢吃馒头");
  }
  work() {
    console.log(this.name + "写代码");
  }
}

var w = new Web("小李");

// w.eat();

w.coding("写ts代码");