- 对对象的形状(Shape)进行描述
- Duck Typing(鸭子类型)
# 简而言之,接口就是一套规范和约束,可以约束对象函数,数组对象。
接口的作用:在面向对象的编程中,接口是一种规范。它定义了行为和事务的规范。在程序设计中,接口起到一种限制和规范的作用。
使用场景: 当一个对象类型被多次使用时,一般会使用接口interface来描述对象的类型,达到复用的目的。
interface Animal{
eat():any;
run():any;
}
class Dog implements Animal{
eat() {
console.log("吃骨头")
}
run() {
console.log("跑得快")
}
}
一、属性接口 对json的约束
传入对象
function http(obj:{url:string,method:string}):void{
console.log(obj);
}
http({url:"top250",method:"get"})
属性接口可以对方法的传参进行约束
interface Params{
url:string,
method:string
}
function http(data:Params):void{
console.log(data);
}
http({url:"top",method:"get"});
二、接口:可选属性
interface Person {
readonly id:number;
name:string;
/* 可选属性 */
age?:number
}
let viking:Person ={
id:1,
name:"李四"
}
viking.id = 3; //error 因为id是只读属性
三、函数类型接口
对函数参数和返回值的约束
/* 加密的函数类型接口 */
interface encrypt{
//设置函数的参数-->返回值
(key:string,value:string):string;
}
var md5:encrypt = function(key:string,value:string):string{
return key+value;
}
console.log(md5("key","chengcheng"));
四、可索引接口
可索引接口:数组、对象的约束。(不常用)
var arr:number [] = [1,2,3];
var arr:Array<int> = [4,5,6];
4-1 数组接口
interface UserArr{
//下标--> 元素
[index:number]:string;
}
var arr:UserArr = ["html","css","javascript"];
console.log(arr[0])
4-2 对象接口
interface UserObj{
[index:string]:string;
}
var obj:UserObj = {"name":"cheng"}
五、类类型接口:对类的约束 —重点
interface Animal{
name:string;
eat(str:string):void;
}
class Dog implements Animal{
name: string;
constructor(name:string){
this.name = name;
}
eat(str: string): void {
console.log(str);
}
}
var dog:Dog = new Dog("wangwang");
dog.eat("骨头");
六、接口的扩展:接口可以继承接口
interface Animal{
name:string;
eat(str:string):void;
}
interface Person extends Animal{
work():void;
}
class Student implements Person{
name: string;
constructor(name:string){
this.name = name;
}
work(): void {
console.log("vue是我工作中最喜欢的框架")
}
eat(str: string): void {
console.log(str);
}
}
七、接口类
interface Animal{
eat():void;
}
class Cat implements Animal{
eat(){
console.log("鱼")
}
}
class Dog implements Animal{
eat(){
console.log("骨头")
}
}
class Woman{
feed(obj:Animal){
obj.eat();
}
}