TypeScript定義接口(interface)案例教程

Posted on by

接口的作用：

接口，英文：interface，其作用可以簡單的理解為：為我們的代碼提供一種約定。

在Typescript中是這麼描述的：

  • TypeScript的核心原則之一是對值所具有的結構進行類型檢查。它有時被稱做“鴨式辨型法”或“結構性子類型化”。
  • 在TypeScript裡，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。

舉個例子：

// 定義接口 Person
interface Person {
    name: string;
    age: number;
}

// 指定定義的變量 man 的類型為我們的 Person "類型" 【這麼表達不是很準確，隻是為瞭方便理解】
let man: Person;

// 此時，我們對 man 賦值時，man 就必須遵守我們定義的 Person 約束，即必須存在 number 類型的 age 字段 和 string 類型的 name 字段
man = { age: 10, name: 'syw' }
# 或者這樣
function fun(women:Person){} // 參數 womem 也必須遵守 Person 約束

上面的例子我簡單說瞭一下如何定義一個接口和接口的作用，下面我就簡單的說一下接口的其他玩法:

設置接口可選屬性：

帶有可選屬性的接口與普通的接口定義差不多，隻是在可選屬性名字定義的後面加一個 ? 符號。

interface Person {
    name: string
    age?: number
}

可選屬性，我們最常見的使用情況是，不確定這個參數是否會傳，或者存在。

在Typescript中是這麼描述可選參數的好處的：

  • 可選屬性的好處之一是可以對可能存在的屬性進行預定義，好處之二是可以捕獲引用瞭不存在的屬性時的錯誤。

額外屬性檢查:

說起來這一點，簡單總結一下就是：我們可以設置屬性是可選的，但是不能傳錯誤的屬性。

  • 以上面的 Person 接口為例，如果我們使用時把 age 屬性 錯誤寫成瞭 aag，typescript 會報錯，即使 age 屬性本身不是必須傳的。

這就是額外屬性檢查。

當然，我們也可以使用 類型斷言 繞開這些屬性檢查，上鏈接：TypeScript中的類型斷言[as語法 | ＜＞ 語法]

設置接口隻讀屬性:

一些對象屬性隻能在對象剛剛創建的時候修改其值。 所以我們可以在屬性名前用 readonly來指定隻讀屬性 。

interface Person {
    readonly name: string;
    readonly age: number;
}
// 賦初始值
let man: Person = {name: 'syw', age: 10};

// 如果此時在對值進行修改，就會出錯。
man.age = 20；// error！
// Cannot assign to 'age' because it is a read-only property.

說起來，隻讀屬性使用起來的效果和 const 差不多，當然兩者根本不是一個東西，我這麼說隻是為瞭好理解。

在Typescript中是這麼描述 readonly 和 const 的：

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

函數類型接口：

簡單來說，函數類型的接口就是規定瞭 函數的參數類型以及函數的返回值類型。

interface PersonFun {
    (name: string, age: number): boolean
}
// 定義函數，符合 PersonFun 約束
let manFun: PersonFun = (name: string, age: number) => {
    return age > 10;
}

註意：

  1. 函數參數類型不可更改，包括返回值也必須遵守約束。
  2. 函數參數名可以不用和接口中的名字對應，隻要求對應參數位置的類型兼容。
// 這樣也是符合要求的
let manFun: PersonFun = (name12: string, age12: number) => {
    return age > 10;
}

可索引類型接口：

可索引類型接口簡單來說就是，我們可以規定 索引的類型 和 返回值的類型。

  • 例如：數組中，我們可以規定 以 number 類型的值來索引，索引到的是一個 string 類型的值，這樣的話其實這個數組的形式基本就固定瞭。
interface PersonArr {
    [index: number]: string
}
// 定義數組
let manArr: PersonArr = ['syw','syw1','syw2'];
// 查詢
manArr[0]; // 此時 0 作為索引是 number 類型，0 號元素返回的是 syw 是 string 類型

Typescript 中支持兩種索引簽名，其實就是索引類型，分別是：number 和 string。

並且，如果我們使用 number 類型的索引，那麼定義的返回值類型 必須是 定義 string 類型索引返回值的子類型。

Typescript 是這麼解釋這句話的：

  • 當使用 number來索引時，JavaScript會將它轉換成string然後再去索引對象。也就是說用 100（一個number）去索引等同於使用”100″（一個string）去索引，因此兩者需要保持一致。

我一開始看到這句話的時候，文字意思看懂瞭，但是不知道怎麼去簡單的表述這句話，仔細研究瞭一下才知道【可能是我太菜】，其實很簡單：

// 比如我這個 PersonArr 有兩個索引，一個是 index（number）類型，一個是 item（string） 類型，那麼我在定義這個兩個索引的返回值的時候，就必須嚴格遵守上面說的：
// 使用 number 類型的索引，那麼定義的返回值類型 必須是 定義 string 類型索引返回值的子類型。

// 所以我下面定義的這個接口就會報錯
interface PersonArr {
    [index: number]: string;
    [item: string]: number;
}
// 因為 index 返回值是 string 類型 ，很顯然不是 item 返回值 number 類型的子類型
// 怎麼寫才對呢？最簡單的方法，把 index 返回值的類型也改成 number 就好瞭。

到此這篇關於TypeScript定義接口(interface)案例教程的文章就介紹到這瞭,更多相關TypeScript定義接口內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：