zoukankan      html  css  js  c++  java
  • TypeScript 第五讲 ———— TypeScript 接口

    前言:

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

    1、属性类接口

    2、函数类型接口

    3、可索引接口

    4、类类型接口

    5、接口拓展

    属性类接口

    //ts中定义方法传入参数
    function printLabel(label: string):void {
    
        console.log('printLabel');
    
    }
    printLabel('haha');
    这里的  label: string 就是一种约束,虽然不是接口,但是表达了接口的定义,那就是一种规定的约束
    //ts中定义方法传入参数
    function printLabel(labelInfo:{label: string}):void {
    
        console.log('printLabel');
    
    }
    printLabel( label: ' 张三 ');//这里必须和传入的参数类型对应,这里传入的是对象
    
    

    接口:行为和动作的规范,对批量方法进行约束

    //传入对象的约束  属性接口
    interface FullName{
        firstName: string;
        secondName: string;
    }
    
    
    function printName(name: FunllName){
    
        console.log(name.firstName+'....'+name.secondName)
    
    }
    var obj = {
       firstName: '';
       secondName: '';
    
    };
    printName(obj)   

    函数类型接口

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

    interface encrypt{
    
       (key:string, value:string):string;
    
    }
    var md5:encrypt = function(key: number , value: string):string{
    
        return key+value;
    
    }
    console.log(md5('name', '张三'));

    可索引接口

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

    var arr: number[] = [12123,1243124]

    var arr1:Array<string> = ['3342' , '324']

    对数组:

    interface UserArr{
    
      [index: number ]:string;
    
    }
    var arr:UserArr = ['aaaa', 'bbbb'];
    
    console.log(arr[0]);

    对对象的约束:

    interface UserObj{
    
      [index: string]:string;
    
    }
    var arr:UserObj= { name: ' 张三 '};

    类类型接口:

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

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

    复杂类型:

    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)
        }
    
    }
    //web类
    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.coding('写ts代码');
    山重水复疑无路,柳暗花明又一村! 专注填坑,少走弯路!
  • 相关阅读:
    wpf中DataGrid自定义验证(包含BindingGroup)
    WPF博客地址分享
    ComboBox在WPF中的绑定示例:绑定项、集合、转换,及其源代码
    【windows phone】CollectionViewSource的妙用
    WPF之Binding深入探讨
    正确理解WPF中的TemplatedParent
    继续聊WPF——获取ComboBox中绑定的值
    WPF触发器(Trigger、DataTrigger、EventTrigger)
    jQuery和javaScript页面加载完成时触发的事件
    jQuery对象和dom对象的转换
  • 原文地址:https://www.cnblogs.com/mqflive81/p/11489195.html
Copyright © 2011-2022 走看看