TS中的接口

1.属性接口 

ts中定义接口 interface   //下文接口定义以及使用

//接口批量约束

interface FullName{
        firstName:string;
        lastName:string;
}

function prinone(name:FullName){
        //必须传入对象 firstName   lastName
        console.log(name.firstName,name.lastName)
}

var obj = { //传入的必须包含 firstName lastName
        age:26,
        firstName:'zhang',
        lastName'san'
}
prinone(obj)

接口 可选属性

interface FullName{
        firstName:string;
        lastName?:string;
}

function getName(name:FullName){
        console.log(name)
}

//参数的书序可以不一样
getName({
        firstName:'zhang',
})

2.函数类型接口

//对方法传入的参数 以及返回值进行约束     //批量约束

//加密的函数类型接口

interface encrypt{
        (key:string,val:string):string
}

var md5:encrypt = function(key:string,val:string):string{
        //模拟操作
        return key+val
}
console.log(md5('zhang','san'))

//其他方法也可调用
var arr:encrypt = fuction(key:string,val:string):string{
        return key+val
}
console.log(md5('li','si'))

3.可索引接口

//数组  对象的约束  (不常用)

interface userArray{
        [index:number]:string
}
var arr:userArray = ['aa','bb']
console.log(arr[0])

4.类类型接口

//对类的约束  和抽象类有点相似

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

5.接口扩展

//接口可以继承接口

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 a = new Web('小雷')
w.work();
w.eat();

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晚风吹心事

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值