接口：

1. 屬性接口：對傳入的參數進行約束

   interface FullName { // 就是傳入對象的約束
       firstName: string;
       secondName: string;
   }
   function printName(name: FullName): void {
       console.log(name.firstName + '---' + name.secondName)
   }
   
   // 調用的時候有兩種寫法:
   // 第一種：直接寫入對象，則對象只能包含接口定義的屬性，并且屬性要遵循屬性定義的類型。否則會報錯
   printName({
       age: 20, // 報紅線
       firstName: 'zhang',
       secondName: 'san'
   })
   // 第二種：把對象寫在外部，則對象只需包含接口定義的屬性，并且屬性要遵循屬性定義的類型。
   let obj = {
       age: 20, 
       firstName: 'zhang',
       secondName: 'san'
   }
   printName(obj)
   

2. 可選屬性

   interface FullName {
       firstName: string;
       secondName?: string;
   }
   function getName(name: FullName): void {
       console.log(name.firstName)
   }
   getName({
       firstName: 'zhang'
   })
   
   
   // 例子 -- 編寫ajax請求參數接口
   interface Config {
       type: string;
       url: string;
       data?: string;
       dataType: string
   }
   function ajax(config: Config) {
      let xhr = new XMLHttpRequest();
      xhr.open(config.type, config.url, true); // true表示異步
      xhr.send(config.data);
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
              console.log('success');
              if (config.dataType === 'json') {
                  console.log(JSON.parse(xhr.responseTest))
              } else {
                  console.log(xhr.responseText)
              }
          }
      }
   }
   ajax({
       type: 'get',
       data: 'name=zhangsan',
       url: 'www.???.com/api',
       dataType: 'json'
   })
   

3. 函數類型接口：對方法傳入的參數以及返回值進行約束。 批量約束

   // 加密的函數類型接口
   interface encrypt {
    (key: string, value: string): string; // 不用寫function， 直接寫參數
   }
   let md5: encrypt = function(key: string, value: string): string {
       // 模擬操作
       return key + 'md5' + value;
   }
   md5('name', 'zhangsan') // namemd5zhangsan
   let sh1: encrypt = function(key: string, value: string): string {
       // 模擬操作
       return key + 'sh1' + value;
   }
   sh1('name', 'lisi') // namesh1lisi
   

4. 可索引接口：對數組、對象的約束

   // 第一種寫法 對數組的約束
   interface UserArr {
     [index: number]: string
   }
   let userarr: UserArr = ['aaa', 'bbb']
   // 第二種寫法 對對象的約束
   interface UserObj {
     [index: string]: string
   }
   let userobj: UserObj = {name: 'zhangsan'}
   

5. 類類型接口： 對類的約束，與抽象類相似

   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 + ' eat meat')
       }
   }
   
   let d = new Dog('wangcai')
   d.eat(); // wangcai eat meat
   

6. 接口擴展： 接口可以繼承接口 ， 類繼承和接口繼承可以結合使用

   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)
       }
   }
   
   class Xiaoming extends Programmer implements Person {
       constructor(name: string) {
           super(name)
       }
       eat() { // 由于Xiaoming 類接口繼承了 Person類接口，Person類接口又繼承了 Animal類接口，所以eat和work方法必須定義
           console.log(this.name + 'like eat nuddles')
       }
       work() {
           console.log(this.name + 'like coding')
       }
   }
   
   let p = new Xiaoming('小明')
   p.eat(); // 小明like eat nuddles
   p.coding('寫ts代碼'); // 小明寫ts代碼
   

   持續更新！