TypeScript 中的 interface 接口
-
Interface接口初步了解
現(xiàn)在我們要作一個(gè)簡歷的自動(dòng)篩選程序闷尿，
const screenResume = (name: string, age: number, height: number) => {
age < 60 && height >= 160 && console.log(name + "進(jìn)入面試");
};
screenResume("張三", 18, 180);
這時(shí)候老板又增加了需求，說我必須能看到這些簡歷胆绊。于是你又寫了這樣一個(gè)方法。
const getResume = (name: string, age: number, height: number) => {
console.log(name + "年齡是：" + age);
console.log(name + "身高是：" + height);
};
getResume("張三", 18, 180);
這時(shí)候問題來了，程序開發(fā)中一直強(qiáng)調(diào)“代碼重用”捌斧，兩個(gè)方法用的類型注解一樣笛质，需要作個(gè)統(tǒng)一的約束泉沾。上節(jié)課一個(gè)類型別名的知識可以解決代碼重復(fù)的問題，這節(jié)課我們就用一個(gè)更常用的語法接口（Interface）.
我們可以把這兩個(gè)重復(fù)的類型注解妇押，定義成統(tǒng)一的接口跷究。代碼如下：
interface Girl {
name: string;
age: number;
height: number;
}
有了接口后，我們的程序也要作一些修改敲霍，需要寫成下面的樣子俊马。這樣就更像是面向?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);
- 接口和類型別名的區(qū)別
現(xiàn)在我們學(xué)了接口，也學(xué)過了類型別名肩杈，這兩個(gè)語法和用處好像一樣柴我，
類型別名可以直接給類型，比如
string扩然，而接口必須代表對象艘儒。
比如我們的類型別名可以寫出下面的代碼：
type Girl1 = stirng;
但是接口就不能這樣寫，它必須代表的是一個(gè)對象，也就是說界睁，你初始化girl的時(shí)候觉增，必須寫出下面的形式.
const girl = {
name: "張三",
age: 18,
height: 180,
};
- 接口非必選值得定義
這時(shí)候老板又有了新的要求，要求盡量能看到體重翻斟，但是不作強(qiáng)制要求逾礁，就是可選值嗎。那接口如何定義那访惜？其實(shí)typeScript已經(jīng)為我們準(zhǔn)備好了相應(yīng)的辦法嘹履，就是在:號前加一個(gè)?
interface Girl {
name: string;
age: number;
height: number;
weight?: number;
}
然后我們再修改一下getResume方法，寫成這樣债热。
const getResume = (girl: Girl) => {
console.log(girl.name + "年齡是：" + girl.age);
console.log(girl.name + "身高是：" + girl.height);
girl.weight && console.log(girl.name + "體重是：" + girl.weight);
};
- 允許加入任意值
簡歷一般是有自由發(fā)揮的空間的植捎，所以這時(shí)候需要一些任意值，就是自己愿意寫什么就寫什么阳柔。這時(shí)候interface接口也是支持的焰枢。
interface Girl {
name: string;
age: number;
height: number;
weight?: number;
[propname: string]: any;
}
這個(gè)的意思是，屬性的名字是字符串類型舌剂，屬性的值可以是任何類型济锄。
這時(shí)候我們在對象里給一個(gè)性別,代碼如下：
const girl = {
name: "張三",
age: 18,
height: 170,
weight: 50,
sex: "女",
};
再修改一下代碼，這首就沒有錯(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類型恕沫。這時(shí)候你就不要再想成簡歷了，你需要更面向?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)槲覀儗ο罄餂]有 say方法迄委。那我們就要給對象一個(gè) say 方法
const girl = {
name: "張三",
age: 18,
height: 170,
weight: 50,
sex: "女",
say() {
return "hello！类少！";
},
};
- 接口和類的約束
我們都知道 JavaScript 從ES6里是有類這個(gè)概念的叙身，類可以和接口很好的結(jié)合，我們先來看一個(gè)例子硫狞。下面的
class XiaoJieJie implements Girl {}
這時(shí)候類會(huì)直接報(bào)錯(cuò)信轿，所以我們需要把這個(gè)類寫的完全點(diǎn)赞警。
class XiaoJieJie implements Girl {
name = "張三";
age = 18;
height = 170;
say() {
return "hello！虏两！";
}
}
- 接口間的繼承
接口也可以用于繼承的愧旦，比如你新寫一個(gè)Teacher接口，繼承于Person接口定罢。
interface Teacher extends Girl {
teach(): string;
}
比如這時(shí)候老板說了笤虫，只看 Teacher 級別的簡歷，那我們需要修改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對象惠况，增加teach()方法遭庶，這時(shí)候就不會(huì)報(bào)錯(cuò)了。
const girl = {
name: "zhangsan",
age: 18,
height: number;
weight?: number;
sex: "女",
say() {
return "hello３硗馈峦睡！";
},
teach() {
return "hello";
},
};
