1. 程式人生 > 其它 >TS - typescript 介面(interface)

TS - typescript 介面(interface)

技術標籤:Typescripttypescriptts介面interface

介面

TypeScript 的核心原則之一是對值所具有的結構進行型別檢查。我們使用介面(Interfaces)來定義物件的型別。

介面是物件的狀態(屬性)和行為(方法)的抽象(描述)

介面型別的物件: 多了或者少了屬性是不允許的
可選屬性: ?
只讀屬性: readonly

// 定義人的介面
interface IPerson {
  readonly id: number	// 只讀屬性:一旦賦值後再也不能被改變了。
  name?: string			// 可選屬性
  age: number
  sex:
string } const person1: IPerson = { id: 1, name: 'tom', age: 20, sex: '男' } const person2: IPerson = { id: 2, // name: 'jilyz', age: 18, sex: '男' } // person1.id = 3 // error

可選屬性的好處:

  • 對可能存在的屬性進行預定義;
  • 捕獲引用了不存在的屬性時的錯誤.

函式型別

介面能夠描述 JavaScript 中物件擁有的各種各樣的外形。 除了描述帶有屬性的普通物件外,介面也可以描述函式型別

為了使用介面表示函式型別,我們需要給介面定義一個呼叫簽名。它就像是一個只有引數列表和返回值型別的函式定義。引數列表裡的每個引數都需要名字和型別。

interface SearchFunc {
    // 定義一個呼叫簽名: 像是一個只有引數列表和返回值型別的函式定義
    (source: string, subString: string): boolean
}
// 建立一個函式型別的變數,並將一個同類型的函式賦值給這個變數。
const mySearch: SearchFunc = function (source: string, sub: string): boolean {
    return source.search(sub) > -1  // search 返回子串的索引
}
console.log(mySearch
('abcd', 'bc')) // true

類型別

類實現介面。

  1. 一個類可以實現多個介面
  2. 一個介面可以繼承多個介面
interface Alarm {
    alert(): any;
}

interface Light {
    lightOn(): void;
    lightOff(): void;
}

class Car implements Alarm {
    alert() {
        console.log('Car alert');
        return `I'm car alert`
    }
}
class Car2 implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}
// let c1 = new Car()
console.log(new Car().alert());
console.log(new Car2().alert());
new Car2().lightOff()
// 介面繼承介面:從一個接口裡複製成員到另一個接口裡,可以更靈活地將介面分割到可重用的模組裡。
interface LightableAlarm extends Alarm, Light { }
class Lta implements LightableAlarm{    // 必須實現介面所有方法
    alert(){}   
    lightOff(){}
    lightOn(){}
}