[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);