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