#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.接口的繼承

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.函數類型接口
對函數傳入的參數和返回值進行約束

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