目錄：

• Typescript 學(xué)習(xí)筆記一：介紹、安裝、編譯
• Typescript 學(xué)習(xí)筆記二：數(shù)據(jù)類型
• Typescript 學(xué)習(xí)筆記三：函數(shù)
• Typescript 學(xué)習(xí)筆記四：回憶Es5 中的類
• Typescript 學(xué)習(xí)筆記五：類
• Typescript 學(xué)習(xí)筆記六：接口
• Typescript 學(xué)習(xí)筆記七：泛型

Typescript 中的接口

接口的作用：在面向?qū)ο蟮木幊讨?，接口是一種規(guī)范的定義，它定義了行為和動作的規(guī)范，在程序設(shè)計(jì)里面，接口起到一種限制和規(guī)范的作用。接口定義了某一批類所需要遵守的規(guī)范，接口不關(guān)心這些類的內(nèi)部狀態(tài)數(shù)據(jù)，也不關(guān)心這些類里方法的實(shí)現(xiàn)細(xì)節(jié)，它只規(guī)定這批類里必須提供某些方法，提供這些方法的類就可以滿足實(shí)際需要。

Typescrip 中的接口類似于 java，同時還增加了更靈活的接口類型，包括屬性、函數(shù)、可索引和類等。

定義標(biāo)準(zhǔn)。

屬性類接口

對 對象屬性 的約束。

ts 中屬性對象傳參，對方法傳入的對象及屬性進(jìn)行約束。

function printLabel (label: {label:string}):void {
  console.log(`print label：${label.label}`);
}
printLabel({label: '標(biāo)簽'}); // 必須傳入帶有l(wèi)abel屬性，且屬性值是字符串的對象
// printLabel({label: '標(biāo)簽', name: 'text'}); // 錯誤
// printLabel({name: '標(biāo)簽'}); // 錯誤
// printLabel('標(biāo)簽'); // 錯誤

接口：行為和動作的規(guī)范，對批量方法傳入?yún)?shù)進(jìn)行約束。

用關(guān)鍵字interface定義，用分號結(jié)束。約定接口名首字母大寫。

interface FullName {
  firstName:string; // 注意，用分號結(jié)束
  secondName:string; 
}

function printName (name:FullName):void {
  // 必須傳入對象，且?guī)в袑傩裕篺irstName，secondName，且屬性值都是字符串
  console.log(`${name.firstName} -- ${name.secondName}`);
}
printName({firstName:'張', secondName: '三'}); // 必須帶有 firstName，secondName
// printName({firstName:'張', secondName: '三', name: '張三'}); // 錯誤 只能帶有 firstName，secondName

const nameObj = {firstName:'張', secondName: '三', name: '張三', age: 20};
printName(nameObj); // 正確，這種方式，可以傳額外的，但是 firstName、secondName 必須有

printName({ // 參數(shù)的順序可以不一樣
  secondName: '四',
  firstName: '李'
})

function getName (name:FullName):string {
  return `${name.firstName} -- ${name.secondName}`;
}
getName({firstName:'張', secondName: '三'});

接口，可選屬性

interface FullName {
  firstName:string;
  secondName?:string; // ? 代表可選
}
printName({firstName:'張'});

函數(shù)類型接口

對方法傳入的參數(shù)以及返回值進(jìn)行約束，批量約束。

interface Encrytp {
  (key:string, val:string):string;
}

let md5:Encrytp = function (key:string, val:string):string {
  // 具體加密省略
  return key + val;
}
console.log(md5('name', 'Jane')); // nameJane

let hash:Encrytp = function (key:string, val:string):string {
  // 具體加密省略
  return key + ' ---- ' + val;
}
console.log(hash('name', 'Jane')); // name ---- Jane

可索引接口

對數(shù)組、對象的約束（不常用）

ts 中數(shù)組的兩種定義方式：

let arr1:Array<number> = [1, 2];
let arr2:string[] = ['12', '23'];

ts 中可索引接口，對數(shù)組的約束

interface userArr {
  [index:number]:string;
}
let arr3:userArr = ['a', 'b'];
console.log(arr3[0]);
// let arr4:userArr = [12, 34]; // 錯誤

ts 中可索引接口，對對象的約束

interface userObj {
  [index:string]:string;
}
let obj1:userObj = {name: 'Jane'};
// let obj2:userObj = {age: 12}; // 錯誤

類類型接口

對類的約束，和抽象類有點(diǎn)相似。類類型接口實(shí)現(xiàn)用關(guān)鍵字implements

interface Animal {
  name:string;
  eat (food:string):void;
}

class Dog implements Animal { // 類類型接口實(shí)現(xiàn)用關(guān)鍵字 implements
  name:string;

  constructor (name:string) {
    this.name = name;
  }

  eat (food:string):void {
    console.log(`${this.name}喜歡吃${food}`);
  }
}
let d = new Dog('小黑');
d.eat('骨頭'); // 小黑喜歡吃骨頭

class Cat implements Animal {
  name:string;

  constructor (name:string) {
    this.name = name;
  }

  eat (food:string):void {
    console.log(`${this.name}喜歡吃${food}`);
  }
}
let c = new Cat('小白');
c.eat('老鼠'); // 小白喜歡吃老鼠

接口擴(kuò)展

接口可以繼承接口

interface Animal {
  eat ():void;
}
interface Person extends Animal {
  work ():void;
}
class Web implements Person {
  name:string;
  constructor (name:string) {
    this.name = name;
  }
  // 接口 Animal 中的方法必須實(shí)現(xiàn)
  eat ():void {
    console.log(`${this.name}喜歡吃甜點(diǎn)`);
  }
  // 接口 Person 中的方法必須實(shí)現(xiàn)
  work ():void {
    console.log(`${this.name}在運(yùn)動`);
  }
}
let w = new Web('小李');
w.eat();
w.work();

繼承類并實(shí)現(xiàn)接口

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);
  }
  // 接口 Animal 中的方法必須實(shí)現(xiàn)
  eat ():void {
    console.log(`${this.name}喜歡吃甜點(diǎn)`);
  }
  // 接口 Person 中的方法必須實(shí)現(xiàn)
  work ():void {
    console.log(`${this.name}在運(yùn)動`);
  }
}
let w = new Web('小李');
w.eat();
w.work();
w.coding(); // 小李在寫代碼