這篇文章主要介紹“TypeScript如何定義接口”，在日常操作中，相信很多人在TypeScript如何定義接口問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”TypeScript如何定義接口”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
接口，英文：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)單說(shuō)了一下如何定義一個(gè)接口和接口的作用，下面我就簡(jiǎn)單的說(shuō)一下接口的其他玩法:
帶有可選屬性的接口與普通的接口定義差不多，只是在可選屬性名字定義的后面加一個(gè) ? 符號(hào)。
interface Person {
name: string
age?: number
}可選屬性，我們最常見(jiàn)的使用情況是，不確定這個(gè)參數(shù)是否會(huì)傳，或者存在。
在Typescript中是這么描述可選參數(shù)的好處的：
可選屬性的好處之一是可以對(duì)可能存在的屬性進(jìn)行預(yù)定義，好處之二是可以捕獲引用了不存在的屬性時(shí)的錯(cuò)誤。
說(shuō)起來(lái)這一點(diǎn)，簡(jiǎn)單總結(jié)一下就是：我們可以設(shè)置屬性是可選的，但是不能傳錯(cuò)誤的屬性。
以上面的 Person 接口為例，如果我們使用時(shí)把 age 屬性 錯(cuò)誤寫成了 aag，typescript 會(huì)報(bào)錯(cuò)，即使 age 屬性本身不是必須傳的。
這就是額外屬性檢查。
當(dāng)然，我們也可以使用 類型斷言 繞開(kāi)這些屬性檢查，上鏈接：TypeScript中的類型斷言[as語(yǔ)法 | ＜＞ 語(yǔ)法]
一些對(duì)象屬性只能在對(duì)象剛剛創(chuàng)建的時(shí)候修改其值。 所以我們可以在屬性名前用 readonly來(lái)指定只讀屬性 。
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.說(shuō)起來(lái)，只讀屬性使用起來(lái)的效果和 const 差不多，當(dāng)然兩者根本不是一個(gè)東西，我這么說(shuō)只是為了好理解。
在Typescript中是這么描述 readonly 和 const 的：
最簡(jiǎn)單判斷該用readonly還是const的方法是看要把它做為變量使用還是做為一個(gè)屬性。 做為變量使用的話用 const，若做為屬性則使用readonly。
函數(shù)類型接口：
簡(jiǎn)單來(lái)說(shuō)，函數(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)單來(lái)說(shuō)就是，我們可以規(guī)定 索引的類型 和 返回值的類型。
例如：數(shù)組中，我們可以規(guī)定 以 number 類型的值來(lái)索引，索引到的是一個(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來(lái)索引時(shí)，JavaScript會(huì)將它轉(zhuǎn)換成string然后再去索引對(duì)象。也就是說(shuō)用 100（一個(gè)number）去索引等同于使用"100"（一個(gè)string）去索引，因此兩者需要保持一致。
其實(shí)很簡(jiǎn)單：
// 比如我這個(gè) PersonArr 有兩個(gè)索引，一個(gè)是 index（number）類型，一個(gè)是 item（string） 類型，那么我在定義這個(gè)兩個(gè)索引的返回值的時(shí)候，就必須嚴(yán)格遵守上面說(shuō)的：
// 使用 number 類型的索引，那么定義的返回值類型 必須是 定義 string 類型索引返回值的子類型。
// 所以我下面定義的這個(gè)接口就會(huì)報(bào)錯(cuò)
interface PersonArr {
[index: number]: string;
[item: string]: number;
}
// 因?yàn)?nbsp;index 返回值是 string 類型 ，很顯然不是 item 返回值 number 類型的子類型
// 怎么寫才對(duì)呢？最簡(jiǎn)單的方法，把 index 返回值的類型也改成 number 就好了。到此，關(guān)于“TypeScript如何定義接口”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
