TypeScript接口介紹
前言：
TS的核心原則之一就是對(duì)所具有的結(jié)構(gòu) 進(jìn)行類(lèi)型檢查。接口的作用就是為這些類(lèi)型命名和為你的代碼或第三方代碼定義契約。
最終被編譯成JavaScript代碼后不包含接口以及類(lèi)型約束的代碼。
1.接口的定義
接口的作用于type關(guān)鍵字類(lèi)似，但是又不一樣。type可以定義簡(jiǎn)單的數(shù)據(jù)類(lèi)型，例如如下代碼
type str = string
這種寫(xiě)法就不能應(yīng)用在 接口 中，接口中只能寫(xiě)函數(shù)類(lèi)型和類(lèi)類(lèi)型還有數(shù)組類(lèi)型。
在TS中定義接口使用interface關(guān)鍵字。
示例代碼如下所示：
// 定義一個(gè)簡(jiǎn)單的接口
interface Person {
name: string
}
// 定義 get 方法
function getPersonName(person: Person): void {
console.log(person.name)
}
// 定義 set 方法
function setPersonName(person: Person, name: string): void {
person.name = name
}
// 定義一個(gè) person 對(duì)象
let person = {
name: '一碗粥',
}
setPersonName(person, '一碗周')
// 修改成功
getPersonName(person) // 一碗周
Person 接口就像是一個(gè)名字，它用來(lái)描述使用該接口中的要求，例如此接口中需要一個(gè)name屬性，且類(lèi)型為string類(lèi)型。
值得注意的是，類(lèi)型檢查并不會(huì)檢查屬性的順序，只需要對(duì)應(yīng)你的屬性存在，且類(lèi)型相同即可。
2.屬性
2.1可選屬性
如果接口中的某個(gè)屬性是可選的，或者說(shuō)僅僅在某個(gè)條件下存在，可以在屬性名旁邊加一個(gè)?號(hào)。示例代碼如下：
;(function () {
// 定義一個(gè)簡(jiǎn)單的接口
interface Person {
name: string
// 說(shuō)明 age 是可選的
age?: number
}
// 定義一個(gè) person 對(duì)象
let person = {
name: '一碗周',
age: 18,
hobby: 'coding',
}
// 定義 get 方法
function getPersonName(person: Person): void {
// console.log(person.age, person.hobby) // Property 'hobby' does not exist on type 'Person'.
}
})()
此時(shí)的sex屬性我們可寫(xiě)可不寫(xiě)，但是hobb 屬性，由于沒(méi)有在接口中定義，我們調(diào)用會(huì)拋出異常。
2.2只讀屬性
如果想讓一個(gè)屬性為一個(gè)只讀屬性，僅僅需要在屬性前面添加readonly即可。
示例代碼如下：
;(function () {
interface Person {
// 將 name 設(shè)置為只讀
readonly name: string
}
// 定義一個(gè) person 對(duì)象
let person = {
name: '一碗周',
}
// 定義 set 方法
function setPersonName(person: Person, name: string): void {
person.name = name // Cannot assign to 'name' because it is a read-only property.
}
setPersonName(person, '一碗粥')
})()
3.類(lèi)類(lèi)型
3.1繼承接口
和類(lèi)一樣，接口也可以相互繼承。 這讓我們能夠從一個(gè)接口里復(fù)制成員到另一個(gè)接口里，可以更靈活地將接口分割到可重用的模塊里。
接口繼承使用extends關(guān)鍵字，示例代碼如下：
// 定義兩個(gè)接口
interface PersonName {
name: string
}
interface PersonAge {
age: number
}
// 定義一個(gè) Person 接口繼承于以上兩個(gè)接口 多個(gè)接口使用 , 逗號(hào)分割
interface Person extends PersonName, PersonAge {
hobby: string
// 定義一個(gè)方法，返回值為 string
say(): string
}
let person = {
name: '一碗周',
age: 18,
hobby: 'coding',
// 示例方法
say() {
return '一碗周'
},
}
// 定義 get 方法
function getPersonName(person: Person): void {
console.log(person.name, person.age, person.hobby)
}
getPersonName(person) // 一碗周 18 coding
繼承多個(gè)接口中間使用,逗號(hào)分割。
4.函數(shù)類(lèi)型
在TS中接口還可以對(duì)函數(shù)類(lèi)型的接口進(jìn)行描述。
函數(shù)類(lèi)型接口的定義就像是一個(gè)只有參數(shù)列表和返回值類(lèi)型的函數(shù)定義，參數(shù)列表中每個(gè)參數(shù)都需要名字和類(lèi)型 。
示例代碼如下所示：
interface MyAdd {
(x: number, y: number): number
}
定義完成之后我們可以像使用普通接口一樣使用這個(gè)函數(shù)接口。
示例代碼如下所示：
let myAdd: MyAdd = (x: number, y: number): number => {
return x + y
}
上面的代碼等同于如下函數(shù)定義的代碼：
let myAdd: (x: number, y: number) => number = (
x: number,
y: number
): number => {
return x + y
}
到此這篇關(guān)于TypeScript接口介紹的文章就介紹到這了,更多相關(guān)TypeScript接口 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
TypeScript學(xué)習(xí)筆記之類(lèi)型窄化篇
目前用TypeScript的人越來(lái)越多,尤其是一些大廠,大的項(xiàng)目,github上面很多開(kāi)源項(xiàng)目也都是ts語(yǔ)法編譯的,這篇文章主要給大家介紹了關(guān)于TypeScript學(xué)習(xí)筆記之類(lèi)型窄化的相關(guān)資料,需要的朋友可以參考下2021-09-09
全面解讀TypeScript和JavaScript的區(qū)別
JavaScript?評(píng)測(cè)代碼運(yùn)行速度的案例代碼
js實(shí)現(xiàn)Select下拉框具有輸入功能的方法
微信小程序登錄數(shù)據(jù)解密及狀態(tài)維持實(shí)例詳解
java前端javascript生成動(dòng)態(tài)表格示例演示