typescript中的接口

typescript中的接口

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

typescript中的接口分为：
1.属性类接口
2. 函数类型接口
3.可索引接口
4.类类型接口
属性接口：对传入对象的约束

interface People{
    name:string;
    age:number
}
function printPeople(personal:People){
console.log('姓名:'+personal.name+'年龄'+personal.age);

}
//调用printPeople这个方法的时候必须传入和上面接口同类型的参数
//否则报错
printPeople((name:'张三',age:23));//正确
printPeople("123");//错误
printPeople((name:'张三',age:23,sex:'男'));//错误

还有一种是可选接口

interface People{
name: string;
age? : number
}
function printPeople(personal :People){
console.log( '姓名: '+personal. name+ '年龄' +personal . age);
}
//调用printPeople这个方法的时候必须传入和上面接口同类型的参数，否则报错
printPeople({name: '张三'，age:23}); //正确 
printPeople( {name: '李四'});//不传age也行，如果接口里面age后面没有带?号，必须传
printPeople("123"); //错误
printPeople({name: '张三'，age:23,sex:'男'});//错误

函数类型接口 对方法传入的参数以及返回值进行约束

//加密的函数类型接口
interface encrypt{
(key : string, value :string):string;
var md5 : encrypt=funct ion(key : string, value :string):string{
//模 拟操作
return key+value;
console . log(md5('name' , ' zhangsan' ));

可索引接口 对数组和对象的约束(不常用)

//对数组的约束
interface UserArr{
[ index: number] : string;
}
var arr:UserArr=["12" , '李四'，"aaa"];//正确
var arr1 :UserArr=[1,李四' ,a];//错误
//对对象的约束
interface User0bj{
[ index:string] : string
}
var obj:UserObj={ "姓名”:"张三”，'性别':"男"}
var obj :User0bj=[];//错误

类类型接口 对类的约束和抽象有点类似

interface Animal{
name: string;
eat(str:string):void;
}
class Dog implements Animal{
name: string;
this . name=name ;
}
eat(){
console. log(this . name+'吃粮食')
}
}

联合类型和接口
以下实例演示了如何在接口中使用联合类型：
TypeScript
interface RunOptions {
program:string;
commandline:string[]|string|(()=>string);
}

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

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

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

var fn:any = options.commandline;
console.log(fn());
输出结果为

Hello
Hello
World
**Hello World**

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

interface namelist { 
   [index:number]:string 
} 
 
var list2:namelist = ["John",1,"Bran"] / 错误元素 1 不是 string 类型
interface ages { 
   [index:string]:number 
} 
 
var agelist:ages; 
agelist["John"] = 15   // 正确 
agelist[2] = "nine"   // 错误

接口继承

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

Child_interface_name extends super_interface_name

多接口继承语法格式：

Child_interface_name extends super_interface1_name,
super_interface2_name,…,super_interfaceN_name

继承的各个接口使用逗号 , 分隔。
单继承实例

interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = {}; 
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);

输出结果为：
年龄:  27
喜欢的乐器:  Drum

多继承实例

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);
输出结果为：
value 1: 12 value 2: 23