TypeScript接口介紹
前言：
TS的核心原則之一就是對所具有的結(jié)構(gòu) 進(jìn)行類型檢查。接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。
最終被編譯成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ù)類型的接口進(jìn)行描述。
函數(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)文章
JavaScript實現(xiàn)數(shù)字格式化的示例詳解
在處理數(shù)字時,為了提高可讀性,我們通常會將整數(shù)部分的數(shù)字以千分位或百分位分隔,本文將詳細(xì)介紹如何使用JavaScript來實現(xiàn)數(shù)字的千分位和百分位分隔,需要的可以參考下2024-04-04
這篇文章主要介紹了javascript實現(xiàn)仿騰訊游戲選擇，簡單實現(xiàn)的下拉菜單二級聯(lián)動效果，十分不錯，有需要的小伙伴可以參考下。2015-05-05
在我們的日常開發(fā)過程中，我們經(jīng)常會遇到數(shù)字與字符串轉(zhuǎn)換，檢查對象中是否存在對應(yīng)值，條件性操作對象數(shù)據(jù)，過濾數(shù)組中的錯誤值，等等這類處理。本文整理出了一些常用的小技巧，希望大家能喜歡2022-06-06
最近項目有代碼高亮的需求,這邊是選用Prism.js來進(jìn)行代碼高亮,Prism是一款輕量級、可擴展的語法高亮器,根據(jù)現(xiàn)代?Web?標(biāo)準(zhǔn)構(gòu)建,應(yīng)用廣泛,這篇文章主要給大家介紹了關(guān)于前端語法高亮插件Prism.js使用詳細(xì)教程的相關(guān)資料,需要的朋友可以參考下2024-05-05
ECharts 是一個使用JavaScript實現(xiàn)的開源可視化庫，涵蓋各行業(yè)圖表，滿足各種需求。這篇文章介紹了ECharts的基礎(chǔ)知識，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
js使用Replace結(jié)合正則替換重復(fù)出現(xiàn)的字符串功能示例
這篇文章主要介紹了js使用Replace結(jié)合正則替換重復(fù)出現(xiàn)的字符串功能,可實現(xiàn)關(guān)鍵詞描紅的功能,涉及JS重復(fù)匹配的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
百度UEditor編輯器如何關(guān)閉抓取遠(yuǎn)程圖片功能
這篇文章主要介紹了百度UEditor編輯器如何關(guān)閉抓取遠(yuǎn)程圖片功能,需要的朋友可以參考下2015-03-03
本篇文章主要是對js 判斷控件獲得焦點的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
Angularjs結(jié)合Bootstrap制作的一個TODO List
這篇文章主要介紹了Angularjs結(jié)合Bootstrap制作的一個TODO List 的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-08-08
小程序異步問題之多個網(wǎng)絡(luò)請求依次執(zhí)行并依次收集請求結(jié)果
這篇文章主要介紹了小程序異步問題之多個網(wǎng)絡(luò)請求依次執(zhí)行并依次收集請求結(jié)果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05