TypeScript接口使用介紹
1 概述
接口是一種規(guī)范的定義,它定義了行為和動(dòng)作的規(guī)范;在程序設(shè)計(jì)里面,接口起到一種限制和規(guī)范的作用。接口定義了某一批類(lèi)所需要遵守的規(guī)范,接口不關(guān)心這些類(lèi)的內(nèi)部狀態(tài)數(shù)據(jù),也不關(guān)心這些類(lèi)里方法的實(shí)現(xiàn)細(xì)節(jié),它只規(guī)定這批類(lèi)里必須提供某些方法,提供這些方法的類(lèi)就可以滿(mǎn)足實(shí)際需要。
接口使用interface
關(guān)鍵字來(lái)進(jìn)行定義。
2 接口類(lèi)別
2.1 屬性接口
屬性接口對(duì)傳入的對(duì)象進(jìn)行約束。
interface 接口名 {
屬性1: 類(lèi)型;
屬性2: 類(lèi)型;
}
示例代碼:
interface IPeople { name: string; age: number; } // 為函數(shù)的參數(shù)使用接口 function people(person: IPeople) { console.log("姓名:", person.name); console.log("年齡:", person.age); } people({ name: "橘貓吃不胖", age: 2 }); // 姓名: 橘貓吃不胖 年齡: 2 people("123"); // 報(bào)錯(cuò),參數(shù)類(lèi)型與接口內(nèi)容不符合 people({ name: "橘貓吃不胖" }); // 報(bào)錯(cuò),參數(shù)缺少age people({ name: "橘貓吃不胖", age: 2, sex: "女" }); // 報(bào)錯(cuò),參數(shù)增加了sex
2.2 可選接口
在接口的屬性名后面加一個(gè)“?”,表示這個(gè)接口是可選的。
interface 接口名 {
屬性1?: 類(lèi)型;
屬性2?: 類(lèi)型;
}
示例代碼:
interface IPeople { name: string; age?: number; // 表示age是可選屬性,有無(wú)都可以 } // 為函數(shù)的參數(shù)使用接口 function people(person: IPeople) { console.log("姓名:", person.name); console.log("年齡:", person.age); } people({ name: "橘貓吃不胖", age: 2 }); // 姓名: 橘貓吃不胖 年齡: 2 people({ name: "橘貓吃不胖" }); // 姓名: 橘貓吃不胖 年齡: undefined people({ name: "橘貓吃不胖", age: 2, sex: "女" }); // 報(bào)錯(cuò),屬性增加了sex
2.3 函數(shù)類(lèi)型接口
函數(shù)類(lèi)型接口可以對(duì)對(duì)方法傳入的參數(shù)以及返回值進(jìn)行約束。
interface 接口名 {
(參數(shù)1: 類(lèi)型, 參數(shù)2: 類(lèi)型): 類(lèi)型;
}
示例代碼:
interface Obj { // 定義接口Obj (key: string, value: number): string; } var myFun: Obj = function (key: string, value: number): string { return key + ":" + value; } console.log(myFun("橘貓吃不胖", 2)); // 橘貓吃不胖:2
2.4 可索引接口
可索引接口主要用于對(duì)數(shù)組和對(duì)象的約束(不常用)。
interface 接口名 {
[索引: 類(lèi)型]: 類(lèi)型;
}
示例代碼:對(duì)數(shù)組的約束
// 對(duì)數(shù)組的約束 interface Arr { // 字符串類(lèi)型的數(shù)組,數(shù)組索引為string類(lèi)型 [index: number]: string; } var arr1: Arr = ["1", "2", "3"]; // 格式正確 var arr2: Arr = [1, 2, 3]; // 報(bào)錯(cuò)
示例代碼:對(duì)對(duì)象的約束
// 對(duì)對(duì)象的約束 interface Obj { // 索引是字符串型 [index: string]: string; } var obj1: Obj = { "張三": "zhangsan", "李四": "lisi" }; // 格式正確 var obj2: Obj = { "張三": 12, "李四": 13 }; // 報(bào)錯(cuò),值不是字符串型 var obj3: Obj = []; // 報(bào)錯(cuò),索引是數(shù)字類(lèi)型
2.5 類(lèi)類(lèi)型接口
類(lèi)類(lèi)型接口用于對(duì)類(lèi)的屬性以及方法進(jìn)行約束,使用implements
關(guān)鍵字對(duì)接口進(jìn)行使用。在類(lèi)中必須將接口中定義的屬性和方法進(jìn)行實(shí)現(xiàn),否則會(huì)報(bào)錯(cuò),并且類(lèi)可以添加接口定義的之外的方法。
interface 接口名 {
屬性: 類(lèi)型;
方法: 類(lèi)型;
}
示例代碼:
interface IAnimal { name: string; // 定義name屬性 eat(): void; // 定義eat方法 } class Dog implements IAnimal { name: string; constructor(name: string) { this.name = name; } eat(): void { // 實(shí)現(xiàn)eat方法 console.log("吃骨頭"); } }
如果不實(shí)現(xiàn)eat方法,代碼會(huì)報(bào)錯(cuò):
如果多增添一個(gè)sleep方法,代碼不會(huì)報(bào)錯(cuò):
3 接口繼承
接口繼承就是說(shuō)接口可以通過(guò)其他接口來(lái)擴(kuò)展自己。TypeScript 允許接口繼承多個(gè)接口。繼承使用關(guān)鍵字extends
。
1 單接口繼承語(yǔ)法格式
interface 子接口 extends 父接口 {
// 具體實(shí)現(xiàn)
}
示例代碼:
interface Shape { color: string; } interface Square extends Shape { sideLength: number; } var s = <Square>{}; // 使用接口 s.color = "red"; s.sideLength = 30; console.log(s); // { color: 'red', sideLength: 30 }
2 多接口繼承語(yǔ)法格式
interface 子接口 extends 父接口1, 父接口2... {
// 具體實(shí)現(xiàn)
}
示例代碼:
interface Shape { color: string; } interface PenStroke { penWidth: number; } interface Square extends Shape, PenStroke { sideLength: number; } let s1 = <Square>{}; s1.color = "red"; s1.penWidth = 20; s1.sideLength = 2; console.log(s1); // { color: 'red', penWidth: 20, sideLength: 2 }
到此這篇關(guān)于TypeScript接口使用介紹的文章就介紹到這了,更多相關(guān)TypeScript接口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript學(xué)習(xí)筆記--常用的互動(dòng)方法
本文對(duì)JavaScript中常用的互動(dòng)方法進(jìn)行實(shí)例分析介紹,圖文并茂,有需要的朋友可以看下2016-12-12JavaScript函數(shù)的4種調(diào)用方法實(shí)例分析
這篇文章主要介紹了JavaScript函數(shù)的4種調(diào)用方法,結(jié)合實(shí)例形式總結(jié)分析了javascript函數(shù)調(diào)用常見(jiàn)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-03-03使用JavaScript實(shí)現(xiàn)檢測(cè)網(wǎng)頁(yè)是否為空閑狀態(tài)
最近開(kāi)發(fā)項(xiàng)目時(shí),常碰到“用戶(hù)在一定時(shí)間內(nèi)無(wú)任何操作時(shí),跳轉(zhuǎn)到某個(gè)頁(yè)面”的需求,所以本文就來(lái)使用JavaScript實(shí)現(xiàn)這一要求,需要的可以參考下2024-03-03BootStrapTable 單選及取值的實(shí)現(xiàn)方法
學(xué)習(xí)bootstrapTable 一直沒(méi)有找到 單選框的選定的和取值的教程,接下來(lái)通過(guò)本文給大家分享BootStrapTable 單選及取值的實(shí)現(xiàn)方法,非常不錯(cuò),需要的朋友參考下2017-01-01微信小程序登錄態(tài)和檢驗(yàn)注冊(cè)過(guò)沒(méi)的app.js寫(xiě)法
這篇文章主要介紹了小程序登錄態(tài)和檢驗(yàn)注冊(cè)過(guò)沒(méi)的app.js寫(xiě)法, 本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的借鑒價(jià)值,需要的朋友可以參考下2019-05-05JS實(shí)現(xiàn)簡(jiǎn)單表格排序操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單表格排序操作,結(jié)合具體實(shí)例形式分析了JavaScript事件響應(yīng)及table表格動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-10-10