TypeScript接口介紹
前言:
TS的核心原則之一就是對所具有的結(jié)構(gòu) 進行類型檢查。接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。
最終被編譯成JavaScript
代碼后不包含接口以及類型約束的代碼。
1.接口的定義
接口的作用于type
關(guān)鍵字類似,但是又不一樣。type可以定義簡單的數(shù)據(jù)類型,例如如下代碼
type str = string
這種寫法就不能應(yīng)用在 接口 中,接口中只能寫函數(shù)類型和類類型還有數(shù)組類型。
在TS中定義接口使用interface
關(guā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 } // 定義一個 person 對象 let person = { name: '一碗粥', } setPersonName(person, '一碗周') // 修改成功 getPersonName(person) // 一碗周
Person
接口就像是一個名字,它用來描述使用該接口中的要求,例如此接口中需要一個name
屬性,且類型為string類型。
值得注意的是,類型檢查并不會檢查屬性的順序,只需要對應(yīng)你的屬性存在,且類型相同即可。
2.屬性
2.1可選屬性
如果接口中的某個屬性是可選的,或者說僅僅在某個條件下存在,可以在屬性名旁邊加一個?號。示例代碼如下:
;(function () { // 定義一個簡單的接口 interface Person { name: string // 說明 age 是可選的 age?: number } // 定義一個 person 對象 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'. } })()
此時的sex
屬性我們可寫可不寫,但是hobb
屬性,由于沒有在接口中定義,我們調(diào)用會拋出異常。
2.2只讀屬性
如果想讓一個屬性為一個只讀屬性,僅僅需要在屬性前面添加readonly
即可。
示例代碼如下:
;(function () { interface Person { // 將 name 設(shè)置為只讀 readonly name: string } // 定義一個 person 對象 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.類類型
3.1繼承接口
和類一樣,接口也可以相互繼承。 這讓我們能夠從一個接口里復(fù)制成員到另一個接口里,可以更靈活地將接口分割到可重用的模塊里。
接口繼承使用extends關(guān)鍵字,示例代碼如下:
// 定義兩個接口 interface PersonName { name: string } interface PersonAge { age: number } // 定義一個 Person 接口繼承于以上兩個接口 多個接口使用 , 逗號分割 interface Person extends PersonName, PersonAge { hobby: string // 定義一個方法,返回值為 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
繼承多個接口中間使用,逗號分割。
4.函數(shù)類型
在TS中接口還可以對函數(shù)類型的接口進行描述。
函數(shù)類型接口的定義就像是一個只有參數(shù)列表和返回值類型的函數(shù)定義,參數(shù)列表中每個參數(shù)都需要名字和類型 。
示例代碼如下所示:
interface MyAdd { (x: number, y: number): number }
定義完成之后我們可以像使用普通接口一樣使用這個函數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章

全面解讀TypeScript和JavaScript的區(qū)別

微信小程序登錄數(shù)據(jù)解密及狀態(tài)維持實例詳解

java前端javascript生成動態(tài)表格示例演示