Typescript中的接口

文章目录

Typescript中的接口

接口的作用

在面向对象的编程中，接口是一种规范的定义，定义了行为和规范，起到了限制和规范性的作用。接口定义了某一类所需要遵循的规范，接口不关心类的内部数据和实现细节，它只规定这批类中必须提供某些方法，提供这些方法的类中就可以满足实际需要(即定义标准)

属性接口

ts中定义接口 interface


interface FullName {
    
    
    firstName:string;
    secondName:string
}

function printName(name:FullName) {
    
    
    //必须包含firstName和secondName
    console.log(name.firstName + '---' + name.secondName);
}

var obj={
    
    
    age:20,
    firstName:'z',
    secondName:'s'
}
printName(obj)  //传入的必须包含firstName和secondName，你可以利用obj传入多的值，但是你不能使用，比如使用了name.age就会报错

可选属性

interface FullName{
    
    
        firstName:string;
        lastName?:string; //当你加了问号以后，这个属性就可传可不传，不加问号就一定要传，否则会报错
}
 
function getName(name:FullName){
    
    
        console.log(name)
}
 
//参数的顺序可以不一样，但是一定要有要传的参数
getName({
    
    
        firstName:'zhang'，
})

函数类型接口

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

加密的函数类型接口

interface encrypt{
    
    
        (key:string,val:string):string
}
 
let md5:encrypt = function(key:string,val:string):string{
    
    
        //模拟操作
        return key+val
}
console.log(md5('zhang','san'))
 
//其他方法也可调用
let arr:encrypt = fuction(key:string,val:string):string{
    
    
        return key+val
}
console.log(md5('li','si'))

可索引接口

数组、对象的约束（不常用）

//对数组的约束
interface userArray{
    
    
        [index:number]:string
}
var arr:userArray = ['aa','bb']
console.log(arr[0])

类类型接口：对类的约束，和抽象类抽象方法有点像

理解：即父定义一个标准，它的子类继承它以后要在子类中实现父定义的标准

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()

接口扩展

接口扩展：接口可以继承接口

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.work(); 
w.eat();

接口继承

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.work(); 
w.eat();
w.coding('写代码')

【Typescript】ts接口详解