typescript接口

typescript接口

typescript接口的作用：在面向对象的编程中，接口是一种规范的定义，他定义了行为和动作的规范，在程序设计里面，接口起到批量约束和定义标准的作用
通过interface关键词来定义

• typescript接口(5种)
  1. 属性类接口
  2. 函数类型接口
  3. 可索引接口
  4. 类类型接口
  5. 接口扩展

1. 属性类接口

   • 对json的约束
   • 接口：行为和动作的规范，对批量方法进行约束
   • 用interface 关键词来定义接口

     //对批量方法传入参数进行约束 
     //接口：行为和动作的规范，对批量方法进行约束
     //用interface 关键词来定义接口
     interface FullName{
         firstName:string;
         secondName:string;
     }
     function PrintName(name:FullName){
         console.log(name.firstName+'---'+name.secondName)
     }
     //传入参数两种方法
     //第一种
     // PrintName({
     //     //这种方法只能传入firstName和secondName
     //     firstName:'张',
     //     secondName:'三'
     // })
     // 第二种(推荐)
     var obj = {
         age:20,
         firstName:'张',
         secondName:'三'
     }
     PrintName(obj) 
     

2. 函数类型接口

   作用: 对方法传入的参数，以及返回值进行约束可以批量约束

   //函数类型的接口
   // 作用：对方法传入的参数，以及返回值进行约束 //可以批量约束
   
   // 加密的函数类型接口
   
   interface encrypt{
       (key:string,value:string):string;
   }
   
   var md5:encrypt = function(key:string,value:string):string{
       //模拟操作
       return key+value
   }
   console.log(md5('name','zhangsan'))
   
   var sha1:encrypt = function(a:string,b:string):string{
       return a+'------'+b
   }
   console.log(sha1('name','lisi'))
   

3. 可索引接口(不常用)

   作用: 对数组，对象的约束

   //数组的约束
   interface UserArr{
       [index:number]:string//表示索引值为number，值为string
   }
   var arr:UserArr = ['aaa','bbb']
   
   console.log(arr[0])
   // 对象的约束
   interface UserObj{
       [index:string]:string
   }
   var Obj:UserObj = {name:'zhangsan'}
   
   

4. 类类型接口

   作用: 对类的约束和抽象类有点相似
   implements 关键字来实现接口调用

   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 ds = new Dog('xihei')
   ds.eat()//xihei
   
   
   class Cat implements Animal{
       name:string
       constructor (name:string){
           this.name = name
       }
       eat(food:string){
           console.log(this.name+food)
       }
   }
   
   var cs = new Cat('lala')
   cs.eat('你好')//lala你好
   

5. 接口扩展

   作用: 就是接口可以继承接口

   // 接口扩展
   // 就是接口可以继承接口
   
   interface Animals{
       eat():void
   }
   interface Person extends Animals{
       work():void
   }
   
   class web implements Person{
       public name:string
       constructor(name:string){
           this.name = name
       }
       eat(){
           console.log(this.name+'nihao')
       }
       work(){
           console.log(this.name+'lala')
       }
   }
   
   var ws = new web('张三')
   ws.eat()//张三nihao
   ws.work()//张三lala
   

   第二种

   interface Animals{
       eat():void
   }
   interface Person extends Animals{
       work():void
   }
   
   class Programmer{
       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+'nihao')
       }
       work(){
           console.log(this.name+'lala')
       }
   }
   
   var ws = new web('张三')
   ws.eat()//张三nihao
   ws.work()//张三lala
   ws.coding('敲代码')//张三敲代码