[Typescript]基础篇之接口

什么是接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法

并且需要注意的地方是，接口只存在于 Typescript，javascript 中是不存在

接口是声明的一种，声明中存在一种通过别名定义的复杂声明,接口有些类似于复杂声明，但是接口是用于声明一系列相关的内容，并且具备一些特殊的功能，例如继承，所以复杂声明是无法替代复杂声明的

接口的定义

使用关键字：interface

interface interface_name {}

接口的应用

接口的使用

Typescript 中接口的使用：

interface IPerson {
  firstName: string;
  lastName: string;
  sayHi: () => string;
}

let customer: IPerson = {
  firstName: "Tom",
  lastName: "Hanks",
  sayHi: (): string => {
    return "Hi there";
  }
};

console.log("Customer 对象 ");
console.log(customer.firstName);
console.log(customer.lastName);
console.log(customer.sayHi());

let employee: IPerson = {
  firstName: "Jim",
  lastName: "Blakes",
  sayHi: (): string => {
    return "Hello!!!";
  }
};

console.log("Employee  对象 ");
console.log(employee.firstName);
console.log(employee.lastName);

因为接口只存在于 Typescript，所以编译后的 javascript 代码 是：

let customer = {
  firstName: "Tom",
  lastName: "Hanks",
  sayHi: function () {
    return "Hi there";
  }
};
console.log("Customer 对象 ");
console.log(customer.firstName);
console.log(customer.lastName);
console.log(customer.sayHi());
let employee = {
  firstName: "Jim",
  lastName: "Blakes",
  sayHi: function () {
    return "Hello!!!";
  }
};
console.log("Employee  对象 ");
console.log(employee.firstName);
console.log(employee.lastName);

接口中联合类型的使用

interface RunOptions {
  program: string;
  commandline: string[] | string | (() => string);
}

// commandline 是字符串
let options: RunOptions = { program: "test1", commandline: "Hello" };
console.log(options.commandline);

// commandline 是字符串数组
options = { program: "test1", commandline: ["Hello", "World"] };
console.log(options.commandline[0]);

// commandline 是一个函数表达式
options = {
  program: "test1",
  commandline: () => {
    return "**Hello World**";
  }
};

let fn: any = options.commandline;
console.log(fn());

接口中数组的使用

可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串

interface namelist {
  [index: number]: string;
}

// 类型一致，正确
var list2: namelist = ["Google", "Runoob", "Taobao"];
// 错误元素 1 不是 string 类型，会报错
// var list2:namelist = ["Runoob",1,"Taobao"]

接口继承

接口继承是说接口可以通过其他接口来扩展自己。
Typescript 允许接口继承多个接口。
继承使用关键字 extends。

单接口继承

语法

单接口继承语法格式：

Child_interface_name extends super_interface_name

示例

typescript 代码示例：

interface Person {
  age: number;
}

interface Musician extends Person {
  instrument: string;
}

var drummer = <Musician>{};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("年龄:  " + drummer.age);
console.log("喜欢的乐器:  " + drummer.instrument);

编译后的 javascript 代码：

var drummer = {};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("年龄:  " + drummer.age);
console.log("喜欢的乐器:  " + drummer.instrument);

多接口继承

语法

多接口继承语法格式：

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

示例

typescript 代码示例：

interface IParent1 {
  v1: number;
}

interface IParent2 {
  v2: number;
}

interface Child extends IParent1, IParent2 {}
var Iobj: Child = { v1: 12, v2: 23 };
console.log("value 1: " + Iobj.v1 + " value 2: " + Iobj.v2);

编译后的 javascript 代码：

var Iobj = { v1: 12, v2: 23 };
console.log("value 1: " + Iobj.v1 + " value 2: " + Iobj.v2);