文章目錄

• • 接口的作用：
  • 設(shè)置接口可選屬性：
  • • 額外屬性檢查:
  • 設(shè)置接口只讀屬性:
  • 函數(shù)類型接口：
  • 可索引類型接口：

接口的作用：

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

在Typescript中是這么描述的：

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

舉個(gè)例子：

// 定義接口 Person interface Person {name: string;age: number; }// 指定定義的變量 man 的類型為我們的 Person "類型" 【這么表達(dá)不是很準(zhǔn)確，只是為了方便理解】 let man: Person;// 此時(shí)，我們對(duì) man 賦值時(shí)，man 就必須遵守我們定義的 Person 約束，即必須存在 number 類型的 age 字段 和 string 類型的 name 字段 man = { age: 10, name: 'syw' } # 或者這樣 function fun(women:Person){} // 參數(shù) womem 也必須遵守 Person 約束

---

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

設(shè)置接口可選屬性：

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

interface Person {name: stringage?: number }

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

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

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

額外屬性檢查:

說起來這一點(diǎn)，簡(jiǎn)單總結(jié)一下就是：我們可以設(shè)置屬性是可選的，但是不能傳錯(cuò)誤的屬性。

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

這就是額外屬性檢查。

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

設(shè)置接口只讀屬性:

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

interface Person {readonly name: string;readonly age: number; } // 賦初始值 let man: Person = {name: 'syw', age: 10};// 如果此時(shí)在對(duì)值進(jìn)行修改，就會(huì)出錯(cuò)。 man.age = 20；// error！ // Cannot assign to 'age' because it is a read-only property.

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

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

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

函數(shù)類型接口：

簡(jiǎn)單來說，函數(shù)類型的接口就是規(guī)定了 函數(shù)的參數(shù)類型以及函數(shù)的返回值類型。

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

注意：

函數(shù)參數(shù)類型不可更改，包括返回值也必須遵守約束。

函數(shù)參數(shù)名可以不用和接口中的名字對(duì)應(yīng)，只要求對(duì)應(yīng)參數(shù)位置的類型兼容。

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

可索引類型接口：

可索引類型接口簡(jiǎn)單來說就是，我們可以規(guī)定 索引的類型 和 返回值的類型。

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

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

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

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

Typescript 是這么解釋這句話的：

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

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

// 比如我這個(gè) PersonArr 有兩個(gè)索引，一個(gè)是 index（number）類型，一個(gè)是 item（string） 類型，那么我在定義這個(gè)兩個(gè)索引的返回值的時(shí)候，就必須嚴(yán)格遵守上面說的： // 使用 number 類型的索引，那么定義的返回值類型 必須是 定義 string 類型索引返回值的子類型。// 所以我下面定義的這個(gè)接口就會(huì)報(bào)錯(cuò) interface PersonArr {[index: number]: string;[item: string]: number; } // 因?yàn)?index 返回值是 string 類型 ，很顯然不是 item 返回值 number 類型的子類型 // 怎么寫才對(duì)呢？最簡(jiǎn)單的方法，把 index 返回值的類型也改成 number 就好了。

完結(jié)·撒花

總結(jié)

以上是生活随笔為你收集整理的Typescript中定义接口(interface)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。