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

接口的作用：

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

在Typescript中是這么描述的：

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

舉個(gè)例子：

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

// 指定定義的變量 man 的類(lèi)型為我們的 Person "類(lèi)型" 【這么表達不是很準確，只是為了方便理解】
let man: Person;

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

上面的例子我簡(jiǎn)單說(shuō)了一下如何定義一個(gè)接口和接口的作用，下面我就簡(jiǎn)單的說(shuō)一下接口的其他玩法:

設置接口可選屬性：

帶有可選屬性的接口與普通的接口定義差不多，只是在可選屬性名字定義的后面加一個(gè) ? 符號。

interface Person {
    name: string
    age?: number
}

可選屬性，我們最常見(jiàn)的使用情況是，不確定這個(gè)參數是否會(huì )傳，或者存在。

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

• 可選屬性的好處之一是可以對可能存在的屬性進(jìn)行預定義，好處之二是可以捕獲引用了不存在的屬性時(shí)的錯誤。

額外屬性檢查:

說(shuō)起來(lái)這一點(diǎn)，簡(jiǎn)單總結一下就是：我們可以設置屬性是可選的，但是不能傳錯誤的屬性。

• 以上面的 Person 接口為例，如果我們使用時(shí)把 age 屬性 錯誤寫(xiě)成了 aag，typescript 會(huì )報錯，即使 age 屬性本身不是必須傳的。

這就是額外屬性檢查。

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

設置接口只讀屬性:

一些對象屬性只能在對象剛剛創(chuàng )建的時(shí)候修改其值。 所以我們可以在屬性名前用 readonly來(lái)指定只讀屬性 。

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

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

說(shuō)起來(lái)，只讀屬性使用起來(lái)的效果和 const 差不多，當然兩者根本不是一個(gè)東西，我這么說(shuō)只是為了好理解。

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

• 最簡(jiǎn)單判斷該用readonly還是const的方法是看要把它做為變量使用還是做為一個(gè)屬性。 做為變量使用的話(huà)用 const，若做為屬性則使用readonly。

函數類(lèi)型接口：

簡(jiǎn)單來(lái)說(shuō)，函數類(lèi)型的接口就是規定了 函數的參數類(lèi)型以及函數的返回值類(lèi)型。

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

注意：

1. 函數參數類(lèi)型不可更改，包括返回值也必須遵守約束。
2. 函數參數名可以不用和接口中的名字對應，只要求對應參數位置的類(lèi)型兼容。

// 這樣也是符合要求的
let manFun: PersonFun = (name12: string, age12: number) => {
    return age > 10;
}

可索引類(lèi)型接口：

可索引類(lèi)型接口簡(jiǎn)單來(lái)說(shuō)就是，我們可以規定 索引的類(lèi)型 和 返回值的類(lèi)型。

• 例如：數組中，我們可以規定 以 number 類(lèi)型的值來(lái)索引，索引到的是一個(gè) string 類(lèi)型的值，這樣的話(huà)其實(shí)這個(gè)數組的形式基本就固定了。

interface PersonArr {
    [index: number]: string
}
// 定義數組
let manArr: PersonArr = ['syw','syw1','syw2'];
// 查詢(xún)
manArr[0]; // 此時(shí) 0 作為索引是 number 類(lèi)型，0 號元素返回的是 syw 是 string 類(lèi)型

Typescript 中支持兩種索引簽名，其實(shí)就是索引類(lèi)型，分別是：number 和 string。

并且，如果我們使用 number 類(lèi)型的索引，那么定義的返回值類(lèi)型 必須是 定義 string 類(lèi)型索引返回值的子類(lèi)型。

Typescript 是這么解釋這句話(huà)的：

• 當使用 number來(lái)索引時(shí)，JavaScript會(huì )將它轉換成string然后再去索引對象。也就是說(shuō)用 100（一個(gè)number）去索引等同于使用"100"（一個(gè)string）去索引，因此兩者需要保持一致。

我一開(kāi)始看到這句話(huà)的時(shí)候，文字意思看懂了，但是不知道怎么去簡(jiǎn)單的表述這句話(huà)，仔細研究了一下才知道【可能是我太菜】，其實(shí)很簡(jiǎn)單：

// 比如我這個(gè) PersonArr 有兩個(gè)索引，一個(gè)是 index（number）類(lèi)型，一個(gè)是 item（string） 類(lèi)型，那么我在定義這個(gè)兩個(gè)索引的返回值的時(shí)候，就必須嚴格遵守上面說(shuō)的：
// 使用 number 類(lèi)型的索引，那么定義的返回值類(lèi)型 必須是 定義 string 類(lèi)型索引返回值的子類(lèi)型。

// 所以我下面定義的這個(gè)接口就會(huì )報錯
interface PersonArr {
    [index: number]: string;
    [item: string]: number;
}
// 因為 index 返回值是 string 類(lèi)型 ，很顯然不是 item 返回值 number 類(lèi)型的子類(lèi)型
// 怎么寫(xiě)才對呢？最簡(jiǎn)單的方法，把 index 返回值的類(lèi)型也改成 number 就好了。

到此這篇關(guān)于TypeScript定義接口(interface)案例教程的文章就介紹到這了,更多相關(guān)TypeScript定義接口內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！