#typescript学习系列# 接口

  • 接口一方面能够在面向对象编程中表示为行为的抽象,另外能够用来描述对象的形状
  • 接口就是把一些类中共有的属性和方法抽象出来,能够用来约束实现此接口的类
  • 一个类能够继承另外一个类并实现多个接口
  • 接口像插件同样是用来加强类的,而抽象类是具体类的抽象概念
  • 一个类能够实现多个接口,一个接口也能够被多个类实现,但一个类的能够有多个子类,但只能有一个父类

1.对象的形状编程

interface Speakable {
//   speak(): void; //或者下面的写法
  speak:()=>void;
  name: string;
}

let speakman: Speakable = {
  speak: () => {},
  name: "fung"
};

let aaa: Speakable = {
  name: "fung",
  speak: () => {
    console.log("汉语");
  }
};

2.行为的抽象数组

interface Speakable {
  speak: () => void;
}

interface Eatable {
  eat: () => void;
}

class Person1 implements Speakable, Eatable {
  speak(){
      console.log('chinese');
  }
  eat(){
      console.log('beaf');
  }
 //也能够这么写
//   speak = () => {
//     console.log("chinese");
//   };
//   eat = () => {
//     console.log("beaf");
//   };
}

3.任意属性函数

//没法预先知道有哪些新的属性的时候,能够使用 `[propName:string]:any`,propName名字是任意的
  interface Person {
    readonly id: number;
    name: string;
    [propName: string]: any;
  }

  let p2: Person = {
    id: 1,
    name: "fung",
    age: 18
  };

4.接口的继承this

interface Speakable {
        speak(): void
    }
    interface SpeakChinese extends Speakable{
        speakChinese():void
    }

    class Person implements Speakable, Speakable{
        speak(){
            console.log('Person')
        }
        speakChinese(){
            console.log('chinese')
        }
    }
    let p = new Person();
    p.speak();
    p.speakChinese();

5.用 readonly 定义只读属性能够避免因为多人协做或者项目较为复杂等因素形成对象的值被重写插件

interface Person {
    readonly id: number;
    name: string;
  }
  let tom: Person = {
    id: 1,
    name: "zhufeng"
  };
  tom.id = 1; //ERROW

6.函数类型接口
对函数传入的参数和返回值进行约束code

interface add {
    (a: number, b: number): number;
  }
  let add: add = function(a, b) {
    return a + b;
  };

7.可索引接口对象

  • 对数组和对象进行约束
  • userInterface 表示index的类型是 number,那么值的类型必须是 string
  • UserInterface2 表示:index的类型是 string,那么值的类型必须是 string
interface userInterface {
    [index: number]: string;
  }
  let arr: userInterface = ["a", "b"];

  interface UserInterface2 {
    [index: string]: string;
  }
  let obj: UserInterface2 = { name: "fung" };

8.类接口
对类的约束继承

interface Person {
    name: string;
    speak():void;
  }
  class Person implements Person {
    name: string;
    constructor(name: string) {
      this.name = name;
    }
    speak(){
      console.log("chinese");
    }
  }
  //或者这么写
  interface PersonImp {
    name: string;
    speak: () => void;
  }
  class Person implements PersonImp {
    name: string;
    constructor(name: string) {
      this.name = name;
    }
    speak = () => {
      console.log("chinese");
    };
  }

9.构造函数的类型索引

  • 在 TypeScript 中,咱们能够用 interface 来描述类
  • 同时也能够使用interface里特殊的new()关键字来描述类的构造函数类型
class Animal {
    constructor(public name: string) {}
  }
  interface WithNameClass {
    new (name: string): Animal;
  }
  function createAnimal(clazz: WithNameClass, name: string) {
    return new clazz(name);
  }
  let a = createAnimal(Animal, "fung");
  console.log(a.name);
相关文章
相关标签/搜索