TypeScript如何定義接口

這篇文章主要介紹“TypeScript如何定義接口”，在日常操作中，相信很多人在TypeScript如何定義接口問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”TypeScript如何定義接口”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

接口的作用：

接口，英文：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如何定義接口”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！