zoukankan      html  css  js  c++  java
  • TS之接口:②函数类型接口、索引接口、类类型接口

    1.函数接口:

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

    interface encrypt {
      (key: string, value: string): string;
    }
    
    // 对传入的参数以及返回值进行约束
    let md1: encrypt = function (key: string, value: string): string {
      return key + value;
    }
    console.log(md1('张三', '初一一班'));
    
    
    let md2: encrypt = function (key: string, value: string): string {
      return key + value;
    }
    console.log(md2('李四', '初二三班'));

     2.可索引接口

    对数组、对象的约束

    (1)对数组的约束

    interface UserArr {
      [index: number]: string
    }
    
    let arr: UserArr = ['aaa', '111'];
    console.log(arr[1]);

    (2)对对象的约束

    interface UserObj {
      [index: string]: string
    }
    
    let obj: UserObj = { name: '张三', age: '20' }
    console.log(obj);

    3.类类型接口

    对类的约束(和抽象类相似)

    interface Animal {
      name: string;
    
      eat(str: string): void;
    }
    
    class Dog implements Animal {
      // 必须包含name
      name: string;
      constructor(name: string) {
        this.name = name;
      }
      // 必须包含eat方法
      eat() {
        console.log(this.name + '吃肉');
      }
    }
    
    let d = new Dog('达摩');
    d.eat();

    4.接口的扩展

    接口也是可以继承的

    // 父接口
    interface Animal {
      eat(): void;
    }
    // 子接口继承自父接口
    interface Person extends Animal {
      work(): void;
    }
    
    class Programmer {
      name: string;
      constructor(name: string) {
        this.name = name;
      }
    
      coding() {
        console.log(this.name + "在写代码");
      }
    }
    
    // 类的继承和接口的继承 class Web extends Programmer implements Person { constructor(name: string) { super(name); } // 由于继承关系,所以这个类必须同时包含父接口和子接口的方法 eat() { console.log(this.name + "在吃饭"); } work() { console.log(this.name + "在工作"); } } let w = new Web('张三'); w.work(); w.eat(); w.coding();
  • 相关阅读:
    决策树
    flask数据库的迁移
    flask的查询,一对多,多对多
    django的验证码
    第一讲:python环境配置(python2.7+python3.7)
    pytest
    【TS】-类型兼容性
    HTML--src和href的区别
    JS--为什么null是对象?
    JS--null和undefined的区别
  • 原文地址:https://www.cnblogs.com/codexlx/p/12771822.html
Copyright © 2011-2022 走看看