iT邦幫忙

2024 iThome 鐵人賽

DAY 14
0

使用介面約束類別

  • 當介面與類別組合在一起使用時,主要描述的是一種契約關係,類別無需和介面宣告完全一致,僅需提供介面宣告的屬性和方法,類別本身也可以有自己定義的屬性及方法。
  • 另外,一個類別可同時實現多個介面,只要在implements介面加上一個逗號就可以接續下去。
    類別在繼承時使用extends,而實現介面使用的是implemants
interface JLog {
    log():void
    desc:string
}
class ClassA implements JLog {    //ClassA對JLog介面進行實現
    desc:string
    name:string
    constructor(des: string){
        this.desc = des;
        this.name = 'ClassA 類別'
    }
    log(){
        console.log(this.name + this.desc)
    }
}
class ClassB implements JLog{    //ClassB對JLog介面進行實現
    desc:string
    name:string
    constructor(des: string){
        this.desc = des;
        this.name = 'ClassB 類別'
    }
    log(){
        console.log(this.name + this.desc)
    }
}
var clsa:JLog = new ClassA('AAAA');
var clsb:JLog = new ClassB('BBBB');
clsa.log();
clsb.log();
  • 這段程式中JLog是一個介面,而ClassA、ClassB兩個類別都對JLog進行實現。
  • 實際上介面對類別的約束是在於類別的實力物件,而非類別本身,因此類別中的建構函數、靜態屬性是不能被介面約束的。
  • 若是需要對類別本身進行約束,則需要定義一個額外的介面來做到。

介面的繼承

  • 一個介面繼承自另一個介面可以視為將父介面中所宣告的屬性及方法複製到子介面中。
  • 類別進行繼承時,一個子類別只能有一個父類別,兩者之間有著嚴格的從屬關係,但介面的繼承不同,比較像是一種組合關係,一個介面可以繼承多個介面,這樣讓介面的定義能夠更加靈活。
interface Shape{
    area(): number
}
interface ColorInterface {
    color:string
}
interface CircleInterface extends Shape, ColorInterface {
    radius:number
}
var circleImp:CircleInterface = {
    radius:2,
    color:'red',
    area():number {
        return this.radius * this.radius * 3.14;
    }
}
  • 上面這段程式是讓CircleInterface繼承了Shape和ColorInterface這兩個介面。

今天的介紹就到這邊告一個段落了,明天要介紹的內容是類型推斷與高級類型!


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

尚未有邦友留言

立即登入留言