Typescript學(xué)習(xí)之接口interface舉例詳解
一、interface的基本含義
TS新增了一個(gè)重要概念:接口, 分為對(duì)象類(lèi)型接口和函數(shù)類(lèi)型接口
接口可以約束對(duì)象,函數(shù),類(lèi)的結(jié)構(gòu)和類(lèi)型,是一種代碼協(xié)作必須遵守的契約
Interface 是一種描述對(duì)象或函數(shù)的東西。你可以把它理解為形狀,一個(gè)對(duì)象需要有什么樣的屬性,函數(shù)需要什么參數(shù)或返回什么樣的值,數(shù)組應(yīng)該是什么樣子的,一個(gè)類(lèi)和繼承類(lèi)需要符合什么樣的描述等等。接下來(lái)具體講解對(duì)象類(lèi)型接口、函數(shù)類(lèi)型接口及混合類(lèi)型接口。
二、對(duì)象類(lèi)型接口
接口中可定義以下屬性:
確定屬性、可選屬性、只讀屬性、任意屬性(可以通過(guò) as 或 [propName: string]: any 來(lái)制定可以接受的其他額外屬性)
這里我們舉得例子是在vue3中實(shí)現(xiàn)的:
interface Person {
age: number,// 確定屬性
name?: string,// 可選屬性(加問(wèn)號(hào)即可)
[propName: string]: any,// 任意屬性
readonly sex: string,// 只讀屬性
}
// 使用接口
const p = ref<Person>({
age: 20,// 確定屬性,不寫(xiě)會(huì)報(bào)錯(cuò)
sex: '女',// 只讀屬性也是確定屬性,不寫(xiě)會(huì)報(bào)錯(cuò)
label1: '班花',// 任意屬性1
label2: '165',// 任意屬性2
})三、函數(shù)類(lèi)型接口
Interface 還可以用來(lái)規(guī)范函數(shù)的形狀。Interface 里面需要列出參數(shù)列表返回值類(lèi)型的函數(shù)定義。寫(xiě)法如下:
- 定義了一個(gè)函數(shù)接口
- 接口接收三個(gè)參數(shù)并且不返回任何值
- 使用函數(shù)表達(dá)式來(lái)定義這種形狀的函數(shù)
// 函數(shù)類(lèi)型接口
interface Func {
// 定于這個(gè)函數(shù)接收兩個(gè)必選參數(shù)都是 number 類(lèi)型,以及一個(gè)可選的字符串參數(shù) desc,
// 這個(gè)函數(shù)不返回任何值
(x: number, y: number, desc?: string): number
}
// 使用
const sum: Func = function (x, y, desc = '') {
// 等價(jià)于const sum: Func = function (x: number, y: number, desc: string): void {
console.log(desc, x + y)
}
console.log(sum(1, 2))四、類(lèi) interface
Interface 也可以用來(lái)定義一個(gè)類(lèi)的形狀。需要注意的是類(lèi) Interface 只會(huì)檢查實(shí)例的屬性,靜態(tài)屬性是需要額外定義一個(gè) Interface;
定義類(lèi)時(shí),可以使類(lèi)去實(shí)現(xiàn)一個(gè)接口
實(shí)現(xiàn)接口就是使類(lèi)滿(mǎn)足接口的要求
// 接口繼承接口:繼承一個(gè)新的接口或者類(lèi),從父類(lèi)或者接口繼承所有的屬性和方法
// 不可以重寫(xiě)屬性,但可以重寫(xiě)方法
interface classPerson extends Person1 {
//在繼承的基礎(chǔ)上新找了個(gè)了一個(gè)teach方法,且返回值是string類(lèi)型
teach(): string;
}
// 類(lèi)實(shí)現(xiàn)接口implements:實(shí)現(xiàn)一個(gè)新的類(lèi),從父類(lèi)活接口實(shí)現(xiàn)所有的屬性和方法,
// 同時(shí)可以重寫(xiě)屬性和方法,包含一些新的功能
class classPerson2 implements Person1 {
age = 20
name = 'suosuo'
sex = '女'
say() {
return '我的全名是小鎖'
}
}五、混合類(lèi)型的 Interface
混合類(lèi)型的接口就是使用同一個(gè) Interface 來(lái)描述函數(shù)或者對(duì)象的屬性或方法。
// 混合類(lèi)型接口
interface MixType {
// 如果只有這么一個(gè),那么這個(gè)接口是函數(shù)接口
(x: number, y: number): number,
// 還含有其他方法,那么這個(gè)接口就是混合接口
add(x: number, y: number): number,
// 還有另一個(gè)方法
log(): void,
(): void
}
// 調(diào)用
function sum() {
let sum: MixType = (() => { }) as MixType;
sum.add = (x: number, y: number) => { return x + y }
sum.log = () => { }
}
const isShowModal = ref(false)
function open() {
isShowModal.value = true
}六、總結(jié)
- 接口就是用來(lái)定義一個(gè)類(lèi)結(jié)構(gòu),定義一個(gè)類(lèi)中應(yīng)該包含哪些屬性和方法,同時(shí)接口也可以當(dāng)成類(lèi)型聲明去使用
- 接口中的所有的屬性都不能有實(shí)際的值
- 接口只定義對(duì)象的結(jié)構(gòu),而不考慮實(shí)際值
- 在接口中所有的方法都是抽象方法
到此這篇關(guān)于Typescript學(xué)習(xí)之接口interface的文章就介紹到這了,更多相關(guān)Typescript接口interface內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
echarts橫向柱狀圖簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于echarts橫向柱狀圖簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,ECharts是百度前端開(kāi)發(fā)部開(kāi)發(fā)的一個(gè)開(kāi)源可視化庫(kù),它可以幫助開(kāi)發(fā)者輕松的實(shí)現(xiàn)各種數(shù)據(jù)可視化,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
淺談bootstrap使用中的一些問(wèn)題以及解決過(guò)程
下面小編就為大家?guī)?lái)一篇淺談bootstrap使用中的一些問(wèn)題以及解決過(guò)程。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
基于JavaScript實(shí)現(xiàn)表格滾動(dòng)分頁(yè)
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)表格滾動(dòng)分頁(yè),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11
JavaScript實(shí)現(xiàn)彈出式可拖動(dòng)登錄框
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)彈出式可拖動(dòng)登錄框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01

