文、意如
TypeScript系列：
認識什麼是介面(Interface)？
Interface通常被稱作介面或是接口，它主要在與類別(Class)間約定行為，描述有
哪些方法與屬性，但不包含怎麼執行。
在 TypeScript中主要使用介面（Interfaces）來定義物件的型別。
複習一下在TypeScript宣告變數時需要限定型別
例如：var age: number = 18;
此時age 就被 number 型別限定了，放進 age 的值就只能是 number 數字型別 。
使用介面設定型別
變數中如使用介面此時屬性與型別需要跟介面要求的ㄧ致。
interface Info { //定義介面 Info
city: string;
memberid: number;
}
var mydata: Info = { //定義變數 mydata，使用 Info介面
//所以屬性與型別需要跟介面Info要求的ㄧ致
city: '台北',
memberid: 12345
};
console.log(mydata);需要彈性規則可以設定可選屬性加上問號（？）
如需要設定彈性一點，讓屬性不用完全一樣時，那就可以使用可選屬性 (?)
用法如下：
//可選屬性
interface Info { //定義介面 Info
city: string;
memberid?: number; //加上？號，可選屬性
}
var mydata: Info = { //定義變數 mydata，使用 Info介面
//所以屬性與型別需要跟介面Info要求的ㄧ致
city: '台北',
//memberid: 12345 //因為有加上？號，所以可以設定也可以不用設定memberid 屬性
};
console.log(mydata);
類別與介面
通常來說一個類別只能繼承另一個類別，但在不同類別之間仍有一些共同的特
性，這時候就可以使用介面（Interface）的規則，使用 implements來實作，
提高了物件導向的靈活性。
//類別實作介面
interface Info { //定義介面 Info
city: string;
memberid: number;
}
class Mydata implements Info { //類別實作介面
//按照介面規定設定屬性跟型別
city: string;
memberid: number;
constructor(city: string) {//建構子
this.city = city;
}
}
const mycity = new Mydata('台中');
console.log(mycity);//Mydata { city: '台中' }介面繼承介面
繼承介面後，除了介面Interface自身的規則外也要符合被繼承的介面規則，範例
如下：
interface Info { //定義介面 Info
city: string;
memberid: number;
}
//介面繼承介面
//Mydata須符合自身規則與Info規則
interface Mydata extends Info{
name:string;
}
//須符合Mydata與Info規則
interface MyInfo extends Mydata,Info{
age:number;
}
//須符合介面Info規則
const info : Info={
city:"台北" ,
memberid:12345,
};
//須符自身規則與Info規則
const data : Mydata={
city:"台北" ,
memberid:12345,
name:"John",
};
//須符自身規則及Mydata與Info規則
const myInfo : MyInfo={
city:"台北" ,
memberid:12345,
name:"John",
age:18,
};當介面遇到重複名稱時
重複名稱的interface 會自動被合併（merge)，範例如下：
//重複名稱的interface 會自動被合併（merge)
interface Info {
city: string;
}
interface Info {
memberid: number;
}
interface Info {
name:string;
}
//如遇到重複的infterface名稱，等同於自動合併為一個
interface Info {
city: string;
memberid: number;
name:string;
}
唯獨屬性-readonly
如果將屬性設定為唯讀readonly，代表只能在建立時賦予它值，無法後續再更新
值。
//唯讀屬性
interface Myinfo {
readonly name: string; //設定為唯讀屬性
age: number;
}
let data: Myinfo = {
name: "John",//唯讀屬性只能在建立時賦予值
age:18,
};
data.name = 'Mary';//因為是唯讀屬性，所以不能修改，會報錯
結論
比起在類別中直接指定參數，不如使用Interface來幫我們規範方法與屬性，讓工
程師們可以更安心使用也讓後續程式更加容易維護。
Yiru@Studio - 關於我 - 意如