iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0

介面的應用

定義

  • 介面是用來描述物件或類別的結構,以日常生活中為例,最常應用的例子是電源插銷和插座。
  • 將插座視為介面,所有要使用交流電驅動的電器皆需要提供一個插銷來調配插座,而插銷則視作電器對插座介面的實現。
  • 在TypeScript中我們使用Interface為提供獨立功能的模組定義介面,物件及類別透過實現介面來為這些功能提供具體支援。
interface Tips{
    label:string,
    color?:string,
    [propName:string]: number | string | undefined
}
var circle:Tips = {
    label:"圓形",
    radius:3
};
var rectangle:Tips = {
    label:"矩形",
    width:100,
    height:100
}
descLog(circle);
descLog(rectangle);
  • 在上面這個例子中,Tips介面約定了一個字串類型的label屬性,而circle和rectangle物件都對此進行實現,descLog是列印函數,它所要求的參數必須為實現Tips介面的物件。
  • color屬性的部分color?:string表示它是可選的。
  • 當一個物件需要實現多個介面、擁有介面之外的屬性時,可以為介面新增一個字串索引簽名,指定額外的屬性只需滿足約定的類型即可。最後面的undefined是因為如果實現此介面的物件不提供color屬性的實現時,則color屬性的值就是undefined的。
  • 另外介面中定義的屬性也支援新增readonly修飾,若使用readonly則表示當前屬性被宣告為唯讀屬性,
    只有物件建立時可以為此屬性賦值,之後不再允許修改。

約定函數

物件不僅可以約束物件的結構,還能約束函數。

interface RectangleAreaMethod {
    (width: number, height: number): number
}
let func:RectangleAreaMethod = function(w: number, h:number){
    return w * h;
}
let func2:(w:number, h:number)=>number = function(w:number, h:number){
    return w * h;
}
  • 這段程式中func和func2變數所賦值的函數、作用是一樣的,使用介面會使函數的類型更加簡潔。
  • 函數本身也是物件,同樣可以定義額外的屬性,此時實現此介面的函數可作為函數直接呼叫,也可向標準物件一樣進行屬性存取。

可索引類型

陣列、字典都是可索引的類型,我們可以透過陣列下標、字典key名稱索引到值。

interface JArray {
    [index: number]: string
}
interface JDictionary{
    [key: string]: string
}
let arr: JArray = ["a", "b", "c"];
let map: JDictionary = {
    "a":"A",
    "b":"B"
}
console.log(arr[1]);     //b
console.log(map["a"]);   //A
  • 陣列key是遞增的數值型態,而字典的key則是字串類型。
  • 若希望可索引物件內的資料不能被修改,同樣可加上readonly即可。

今天的內容就先到這邊,明天將會介紹用介面來約束類別!


上一篇
Day 12
下一篇
Day 14
系列文
從零開始學習TypeScript、Vue.js !!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言