TypeScript定義介面(interface)案例教程

阿新 • • 發佈：2021-07-26

介面的作用：

介面，英文：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。

函式型別介面：

簡單來說，函式型別的介面就是規定了函式的引數型別以及函式的返回值型別。

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

注意：

函式引數型別不可更改，包括返回值也必須遵守約束。
函式引數名可以不用和介面中的名字對應，只要求對應引數位置的型別相容。

// 這樣也是符合要求的
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來索引時，會將它轉換成string然後再去索引物件。也就是說用 100（一個number）去索引等同於使用"100"（一個string）去索引，因此兩者需要保持一致。

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

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

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

到此這篇關於TypeScript定義介面(interface)案例教程的文章就介紹到這了,更多相關TypeScript定義介面內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！