TypeScript 中的 interface 接口

• Interface接口初步了解

現(xiàn)在我們要作一個(gè)簡(jiǎn)歷的自動(dòng)篩選程序，

const screenResume = (name: string, age: number, height: number) => {
  age < 60 && height >= 160 && console.log(name + "進(jìn)入面試");
};

screenResume("張三", 18, 180);

這時(shí)候老板又增加了需求，說(shuō)我必須能看到這些簡(jiǎn)歷。于是你又寫(xiě)了這樣一個(gè)方法。

const getResume = (name: string, age: number, height: number) => {
  console.log(name + "年齡是：" + age);
  console.log(name + "身高是：" + height);
};
getResume("張三", 18, 180);

這時(shí)候問(wèn)題來(lái)了，程序開(kāi)發(fā)中一直強(qiáng)調(diào)“代碼重用”，兩個(gè)方法用的類(lèi)型注解一樣，需要作個(gè)統(tǒng)一的約束。上節(jié)課一個(gè)類(lèi)型別名的知識(shí)可以解決代碼重復(fù)的問(wèn)題，這節(jié)課我們就用一個(gè)更常用的語(yǔ)法接口（Interface）.

我們可以把這兩個(gè)重復(fù)的類(lèi)型注解，定義成統(tǒng)一的接口。代碼如下：

interface Girl {
  name: string;
  age: number;
  height: number;
}

有了接口后，我們的程序也要作一些修改，需要寫(xiě)成下面的樣子。這樣就更像是面向?qū)ο缶幊塘恕?/p>

const screenResume = (girl: Girl) => {
  girl.age < 60 && girl.height >= 160 && console.log(girl.name + "進(jìn)入面試");
};

const getResume = (girl: Girl) => {
  console.log(girl.name + "年齡是：" + girl.age);
  console.log(girl.name + "身高是：" + girl.height);
};
const girl = {
  name: "大張三",
  age: 18,
  height: 170,
};

screenResume(girl);
getResume(girl);

• 接口和類(lèi)型別名的區(qū)別

現(xiàn)在我們學(xué)了接口，也學(xué)過(guò)了類(lèi)型別名，這兩個(gè)語(yǔ)法和用處好像一樣，

類(lèi)型別名可以直接給類(lèi)型，比如string，而接口必須代表對(duì)象。

比如我們的類(lèi)型別名可以寫(xiě)出下面的代碼：

type Girl1 = stirng;

但是接口就不能這樣寫(xiě)，它必須代表的是一個(gè)對(duì)象，也就是說(shuō)，你初始化girl的時(shí)候，必須寫(xiě)出下面的形式.

const girl = {
  name: "張三",
  age: 18,
  height: 180,
};

• 接口非必選值得定義

這時(shí)候老板又有了新的要求，要求盡量能看到體重，但是不作強(qiáng)制要求，就是可選值嗎。那接口如何定義那？其實(shí)typeScript已經(jīng)為我們準(zhǔn)備好了相應(yīng)的辦法，就是在:號(hào)前加一個(gè)?

interface Girl {
  name: string;
  age: number;
  height: number;
  weight?: number;
}

然后我們?cè)傩薷囊幌?code>getResume方法，寫(xiě)成這樣。

const getResume = (girl: Girl) => {
  console.log(girl.name + "年齡是：" + girl.age);
  console.log(girl.name + "身高是：" + girl.height);
  girl.weight && console.log(girl.name + "體重是：" + girl.weight);
};

• 允許加入任意值
  簡(jiǎn)歷一般是有自由發(fā)揮的空間的，所以這時(shí)候需要一些任意值，就是自己愿意寫(xiě)什么就寫(xiě)什么。這時(shí)候interface接口也是支持的。

interface Girl {
  name: string;
  age: number;
  height: number;
  weight?: number;
  [propname: string]: any;
}

這個(gè)的意思是，屬性的名字是字符串類(lèi)型，屬性的值可以是任何類(lèi)型。

這時(shí)候我們?cè)趯?duì)象里給一個(gè)性別,代碼如下：

const girl = {
  name: "張三",
  age: 18,
  height: 170,
  weight: 50,
  sex: "女",
};

再修改一下代碼，這首就沒(méi)有錯(cuò)誤了。

const getResume = (girl: Girl) => {
  console.log(girl.name + "年齡是：" + girl.age);
  console.log(girl.name + "身高是：" + girl.height);
  girl.weight && console.log(girl.name + "體重是：" + girl.weight);
  girl.sex && console.log(girl.name + "性別是：" + girl.sex);
};

這時(shí)候我們的程序是不報(bào)錯(cuò)的，但是如果我們?nèi)サ魟偛诺脑O(shè)置，就會(huì)報(bào)錯(cuò)。

[propname:string]:any;  //去掉

• 接口里的方法

接口里不僅可以存屬性，還可以存方法，比如這時(shí)候有個(gè)say()方法，返回值是string類(lèi)型。這時(shí)候你就不要再想成簡(jiǎn)歷了，你需要更面向?qū)ο蠡木幊?，想象成一個(gè)人。

interface Girl {
  name: string;
  age: number;
  height: number;
  weight?: number;
  [propname: string]: any;
  say(): string;
}

加上這個(gè)say()方法后，程序馬上就會(huì)報(bào)錯(cuò)，因?yàn)槲覀儗?duì)象里沒(méi)有 say方法。那我們就要給對(duì)象一個(gè) say 方法

const girl = {
  name: "張三",
  age: 18,
  height: 170,
  weight: 50,
  sex: "女",
  say() {
    return "hello??！";
  },
};

• 接口和類(lèi)的約束

我們都知道 JavaScript 從ES6里是有類(lèi)這個(gè)概念的，類(lèi)可以和接口很好的結(jié)合，我們先來(lái)看一個(gè)例子。下面的

class XiaoJieJie implements Girl {}

這時(shí)候類(lèi)會(huì)直接報(bào)錯(cuò)，所以我們需要把這個(gè)類(lèi)寫(xiě)的完全點(diǎn)。

class XiaoJieJie implements Girl {
  name = "張三";
  age = 18;
  height = 170;
  say() {
    return "hello！！";
  }
}

• 接口間的繼承
  接口也可以用于繼承的，比如你新寫(xiě)一個(gè)Teacher接口，繼承于Person接口。

interface Teacher extends Girl {
  teach(): string;
}

比如這時(shí)候老板說(shuō)了，只看 Teacher 級(jí)別的簡(jiǎn)歷，那我們需要修改getResume()方法。

const getResume = (girl: Teacher) => {
  console.log(girl.name + "年齡是：" + girl.age);
  console.log(girl.name + "身高是：" + girl.height);
  girl.weight && console.log(girl.name + "體重是：" + girl.weight);
  girl.sex && console.log(girl.name + "性別是：" + girl.sex);
};

修改后，你就會(huì)發(fā)現(xiàn)下面我們調(diào)用getResume()方法的地方報(bào)錯(cuò)了,因?yàn)檫@時(shí)候傳的值必須有Teach方法，修改girle對(duì)象，增加teach()方法，這時(shí)候就不會(huì)報(bào)錯(cuò)了。

const girl = {
  name: "zhangsan",
  age: 18,
  height: number;
  weight?: number;
  sex: "女",
  say() {
    return "hello??！";
  },
  teach() {
    return "hello";
  },
};