Vue3 從入門到入土(TypeScript接口)

前言

在上一章, 我們就寫過簡單的接口, 本章更深入的瞭解接口

接口是對象的狀態(屬性)和行爲(方法)的抽象(描述)

接口

以例子來了解, 我們有這樣的需求

定義一個對象存放用戶信息, 有四種屬性
- id 是 number 類型, 必須有, 並且只讀
- age 是 number 類型, 必須有
- name 是 string 類型, 必須有
- sex 是 string 類型, 可以沒有

可選/只讀屬性

(()=>{
    // 接口是一種類型/規範/規則/能力/約束

    // 定義一個接口 IUser
    // 接口一般以 I 開頭
    interface IUser{
        readonly id: number,  // 在定義時, 指定 readonly 代表這個屬性是隻讀的
        name: string,
        age: number,
        sex?: string,  // 在定義時, 指定 ? 代表這個屬性是可爲空的, 不指定默認必須存在
    }

    // 定義一個對象
    const u1:IUser={
        id: 1,
        name: "u1",
        age: 18,
    }
    const u2:IUser={
        id: 2,
        name: "u2",
        age: 19,
        sex: "男",
    }
    // u2.id = 3  // 在實例化後, 無法對只讀屬性進行重新賦值
})()

函數類型

上面的接口都是作爲對象使用, 其實他也可以作爲函數的類型使用

(()=>{
    // 接口是一種類型/規範/規則/能力/約束

    // 定義一個接口 SearchFunc, 作爲函數約束使用
    interface SearchFunc{
            // 傳入兩個參數, 都是字符串, 返回 bool
            (source: string, subString: string): boolean
    }

    // 定義一個函數, mySearch, 遵守接口 SearchFunc 
    const mySearch: SearchFunc = function(source: string, sub: string): boolean{
        return source.search(sub) > -1
    }
    console.log(mySearch("abcd", "bc"))
})()

類實現接口

(()=>{
    // 接口是一種類型/規範/規則/能力/約束

    // 一個類可以實現多個接口
    // 一個接口可以繼承多個接口

    // 定義接口 Alarm
    interface Alarm{
        // 實現 alert 方法
        alert(): any;
    }
    // 定義接口 Light
    interface Light{
        // 實現 lightOn 方法
        lightOn(): void;
        // 實現 lightOff 方法
        lightOff(): void;
    }

    // 定義類 Car, 實現接口 Alarm
    // implements 關鍵字, 指定繼承接口 Alarm
    class Car implements Alarm{
        // 繼承後必須實現接口定義的方法
        alert() {
            console.log("alert");
        }
    }

    // 定義類 Car1, 實現接口 Alarm 和 Light
    class Car1 implements Alarm, Light{
        // 必須同時實現接口 Alarm 和 Light 的方法
        alert() {
            console.log("alert");
        }
        lightOff(): void {
            console.log("off");
        }
        lightOn(): void {
            console.log("on");
        }
    }
})()

接口繼承接口

(()=>{
    // 接口是一種類型/規範/規則/能力/約束

    // 接口繼承接口

    // 定義接口 Alarm
    interface Alarm{
        // 實現 alert 方法
        alert(): any;
    }
    // 定義接口 Light
    interface Light{
        // 實現 lightOn 方法
        lightOn(): void;
        // 實現 lightOff 方法
        lightOff(): void;
    }

    // 接口 LightAlarm 繼承 Alarm 和 Light
    interface LightAlarm extends Alarm, Light{
        simple(): void;
    }

    // 定義類 Car1, 實現接口 LightAlarm
    class Car1 implements LightAlarm{
        // 必須同時實現接口 Alarm 和 Light 和 LightAlarm 的方法
        alert() {
            console.log("alert");
        }
        lightOff(): void {
            console.log("off");
        }
        lightOn(): void {
            console.log("on");
        }
        simple(): void{
            console.log("simple")
        }
    }
})()