TypeScript(4)介面

Silent丿丶黑羽發表於2022-06-20

介紹

TypeScript 的核心原則之一是對值所具有的結構進行型別檢查。我們使用介面(Interfaces)來定義物件的型別。介面是物件的狀態(屬性)和行為(方法)的抽象(描述)

介面初探

宣告介面需要使用關鍵字interface,接下來我們定義一個介面,需求如下
需求: 建立人的物件, 需要對人的屬性進行一定的約束

id是number型別, 必須有, 只讀的
name是string型別, 必須有
age是number型別, 必須有
sex是string型別, 可以沒有

 
第一步:建立人的物件

const person: Person = {
    id: 1,
    name: 'tom',
    age: 20,
    sex: '男'
}

我們建立了一個型別為Person的person物件,裡面的屬性有id、name、age、sex
 

第二步:給person物件宣告型別,第一步的時候我們宣告瞭型別Person,但是這個型別具體是什麼,我們還沒定義,所以接下來我們定義一個介面Person,來宣告是person物件的型別

interface Person {
    id: number
    name: string
    age: number
    sex: string
}

此時呢,就已經建立好一個沒有約束的物件person,他的型別宣告是介面Person,接下來加上約束就完整了。
 

第三步:新增約束,id屬性只能是隻讀,sex屬性為可選屬性
要將一個屬性設定為只讀很簡單,只需要在屬性前面增加關鍵字readonly,設定屬性為可選屬性也很簡單,只需在屬性後面新增符號?,最後完整的程式碼如下

interface Person {
    readonly id: number
    name: string
    age: number
    sex?: string
}

const person: Person = {
    id: 1,
    name: 'tom',
    age: 20,
    sex: '男'
}

console.log(person)

 

第四步:測試我們定義的物件,首先我們在瀏覽器中檢視是否列印了這個物件

由於id是隻讀的,我們測試修改id是否報錯

很明顯,這裡報錯了,說id是個只讀屬性
又由於sex是可選屬性,所以我們不設定sex,看看是否成功

const person: Person = {
    id: 1,
    name: 'tom',
    age: 20,
}

console.log(person)


可以看到也是能列印出來的
 

可選屬性

介面裡的屬性不全都是必需的。 有些是隻在某些條件下存在,或者根本不存在。

interface IPerson {
  id: number
  name: string
  age: number
  sex?: string
}

帶有可選屬性的介面與普通的介面定義差不多,只是在可選屬性名字定義的後面加一個 ? 符號。
好處:

  • 可以對可能存在的屬性進行預定義
  • 可以捕獲引用了不存在的屬性時的錯誤。
     
const person2: IPerson = {
  id: 1,
  name: 'tom',
  age: 20,
  // sex: '男' // 可以沒有
}

 

只讀屬性

一些物件屬性只能在物件剛剛建立的時候修改其值。 你可以在屬性名前用 readonly 來指定只讀屬性:

interface Person {
  readonly id: number
  name: string
  age: number
  sex?: string
}

一旦賦值後再也不能被改變了。

const person2: IPerson = {
  id: 2,
  name: 'tom',
  age: 20,
  // sex: '男' // 可以沒有
  // xxx: 12 // error 沒有在介面中定義, 不能有
}
person2.id = 2 // error

readonly vs const
最簡單判斷該用 readonly 還是 const 的方法是看要把它做為變數使用還是做為一個屬性。 做為變數使用的話用 const,若做為屬性則使用 readonly
 

函式型別

介面能夠描述JavaScript中物件擁有的各種各樣的外形。 除了描述帶有屬性的普通物件外,介面也可以描述函式型別。
 
為了使用介面表示函式型別,我們需要給介面定義一個呼叫簽名。 它就像是一個只有引數列表和返回值型別的函式定義。引數列表裡的每個引數都需要名字和型別。

interface SearchFunc {
  (source: string, subString: string): boolean;
}

這樣定義後,我們可以像使用其它介面一樣使用這個函式型別的介面。 下例展示瞭如何建立一個函式型別的變數,並將一個同型別的函式賦值給這個變數。

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}

對於函式型別的型別檢查來說,函式的引數名不需要與介面裡定義的名字相匹配。 比如,我們使用下面的程式碼重寫上面的例子:

let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;
}

函式的引數會逐個進行檢查,要求對應位置上的引數型別是相容的。 如果你不想指定型別,TypeScript的型別系統會推斷出引數型別,因為函式直接賦值給了 SearchFunc型別變數。 函式的返回值型別是通過其返回值推斷出來的(此例是 false和true)。 如果讓這個函式返回數字或字串,型別檢查器會警告我們函式的返回值型別與 SearchFunc介面中的定義不匹配。

let mySearch: SearchFunc;
mySearch = function(src, sub) {
    let result = src.search(sub);
    return result > -1;
}

 

類型別

 

類實現介面

與 C# 或 Java 裡介面的基本作用一樣,TypeScript 也能夠用它來明確的強制一個類去符合某種契約。

// 定義一個介面,裡面有個空方法run
interface IRun {
    run()
}

// 定義一個類,實現介面IRun
class Person implements IRun{
    run() {
        console.log('我正在跑步')
    }
}

// 穿改進類物件person
const person = new Person()
// 執行run方法
person.run()


 

一個類實現多個介面

interface IRun {
    run()
}
interface Swim {
    swim()
}

// 定義一個類,這個類可以實現IRun和Swim介面(當前這個類可以實現多個介面,一個類同時也可以被多個介面進行約束)
class Person2 implements IRun, Swim{
    run() {
        console.log('我正在跑步2')
    }
    swim() {
        console.log('我正在游泳2')
    }
}

const person2 = new Person2()
person2.run()
person2.swim()


總結:類可以通過介面的方式,來定義當前這個類的型別,類可以實現一個介面,也可以實現多個介面,要注意:介面中的內容要真正的實現
 

介面繼承介面

// 定義了一個介面,繼承了其他多個介面
interface IRun {
    run()
}
interface Swim {
    swim()
}

// 介面runSwim繼承了IRun和Swim
interface runSwim extends IRun, Swim{}

// 類實現介面runSwim,因為繼承關係,類可以呼叫繼承介面中的方法
class Person3 implements runSwim{
    run() {
        console.log('我正在跑步3')
    }
    swim() {
        console.log('我正在游泳3')
    }
}

const person3 = new Person3()
person3.run()
person3.swim()

相關文章