TypeScript入門-接口
大致介紹
在TypeScript里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。
接口
例子：
function printLabel(labelledObj: { label: string }) {
console.log(labelledObj.label);
}
let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);
printLabel函數(shù)有一個(gè)參數(shù)，要求這個(gè)參數(shù)是個(gè)對(duì)象，并且有一個(gè)屬性名為label的類型為string的屬性
有時(shí)我們會(huì)傳入多個(gè)參數(shù)，但是只檢測(cè)指定的參數(shù)有沒(méi)有
用接口來(lái)實(shí)現(xiàn)上面的例子：
interface LabelledValue {
label: string;
}
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
注意：要用到關(guān)鍵字 interface
可選屬性
有時(shí)接口里的屬性不是必須的是可選的，那么只要加個(gè)？就可以了
interface SquareConfig {
color?: string;
width?: number;
}
function createSquare(config: SquareConfig): {color: string; area: number} {
let newSquare = {color: "white", area: 100};
if (config.color) {
newSquare.color = config.color;
}
if (config.width) {
newSquare.area = config.width * config.width;
}
return newSquare;
}
let mySquare = createSquare({color: "black"});
上面的代碼中 config:SquareConfig規(guī)定了函數(shù)參數(shù)， {color: string;area: numner}規(guī)定了函數(shù)返回值的類型
使用可選屬性的好處：
1、可以對(duì)可能存在的屬性進(jìn)行定義
2、可以捕獲訪問(wèn)不存在的屬性時(shí)的錯(cuò)誤
只讀屬性
如果向讓一個(gè)值只讀，不可以修改就可以使用readonly
interface Point {
readonly x: number;
readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!
TypeScript具有ReadonlyArray<number>類型，它與Array<T>相似，只是把怕有可變方法去掉了，因此可以確保數(shù)組創(chuàng)建后再也不能被修改：
let a: number[] = [1, 2, 3, 4]; let ro: ReadonlyArray<number> = a; ro[0] = 12; // error! ro.push(5); // error! ro.length = 100; // error! a = ro; // error!
額外的屬性檢查
看一個(gè)例子：
interface SquareConfig {
color?: string;
width?: number;
}
function createSquare(config: SquareConfig): { color: string; area: number } {
// ...
}
let mySquare = createSquare({ colour: "red", width: 100 });
起初會(huì)認(rèn)為這個(gè)是對(duì)的，接口定義了兩個(gè)可選屬性color和width。函數(shù)實(shí)際傳入了width屬性和一個(gè)接口沒(méi)有定義的colour屬性，但是這段代碼會(huì)報(bào)錯(cuò)。
對(duì)象字面量會(huì)被特殊對(duì)待而且會(huì)經(jīng)過(guò)額外屬性檢查，當(dāng)將它們賦值給變量或作為參數(shù)傳遞的時(shí)候。 如果一個(gè)對(duì)象字面量存在任何“目標(biāo)類型”不包含的屬性時(shí)，你會(huì)得到一個(gè)錯(cuò)誤。
最好的解決辦法就是添加一個(gè)字符串索引簽名
interface SquareConfig {
color?: string;
width?: number;
[propName: string]: any;
}
函數(shù)類型
例子：
interface SearchFunc {
(source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(src, sub) {
let result = src.search(sub);
if (result == -1) {
return false;
}
else {
return true;
}
}
可索引的類型
可索引類型比如a[10]或obj['a']。 可索引類型具有一個(gè)索引簽名，它描述了對(duì)象索引的類型，還有相應(yīng)的索引返回值類型。
interface StringArray {
[index: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
JavaScript使用RegExp進(jìn)行正則匹配的方法
這篇文章主要介紹了JavaScript使用RegExp進(jìn)行正則匹配的方法,實(shí)例分析了RegExp對(duì)象在進(jìn)行正則匹配時(shí)的相關(guān)使用技巧,需要的朋友可以參考下2015-07-07
js+html+css實(shí)現(xiàn)簡(jiǎn)單電子時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了js+html+css實(shí)現(xiàn)簡(jiǎn)單電子時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
layui數(shù)據(jù)表格跨行自動(dòng)合并的例子
今天小編就為大家分享一篇layui數(shù)據(jù)表格跨行自動(dòng)合并的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
微信小程序全局配置之tabBar實(shí)戰(zhàn)案例
tabBar相對(duì)而言用的還是比較多的,但是用起來(lái)并沒(méi)有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
js HTML5 Ajax實(shí)現(xiàn)文件上傳進(jìn)度條功能
這篇文章主要介紹了javascript實(shí)現(xiàn)文件上傳進(jìn)度條功能的相關(guān)資料啊，感興趣的朋友可以參考一下2016-02-02
使用Webpack壓縮與轉(zhuǎn)譯JavaScript代碼的操作方法
在Web開(kāi)發(fā)中,代碼的性能和加載時(shí)間是用戶體驗(yàn)的重要組成部分,為此,將JavaScript代碼壓縮和優(yōu)化是發(fā)布前一個(gè)必不可少的步驟,所以本文給大家介紹了如何使用Webpack壓縮與轉(zhuǎn)譯JavaScript代碼,需要的朋友可以參考下2024-05-05
數(shù)組去重復(fù)是一個(gè)常見(jiàn)的需求，我們暫時(shí)考慮同類型的數(shù)組去重復(fù)。主要是理清思路和考慮下性能。以下方法，網(wǎng)上基本都有，這里只是簡(jiǎn)單地總結(jié)一下。2015-04-04
在?JavaScript?中，可以使用內(nèi)置的?Date?對(duì)象來(lái)獲取當(dāng)前時(shí)間，并根據(jù)需要格式化成不同的時(shí)間格式，下面就跟隨小編一起來(lái)看看具體的使用吧2023-08-08
uniapp實(shí)現(xiàn)滑動(dòng)評(píng)分效果
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)滑動(dòng)評(píng)分效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript操作元素教你改變頁(yè)面內(nèi)容樣式
這篇文章主要為大家介紹了JavaScript操作元素，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11