說明
在面向對象語言中,接口是一個很重要的概念,它是對行為的抽象,而具體如何行動需要由類去實現。
TypeScript 中的接口是一個非常靈活的概念,除了可用于對類的一部分行為進行抽象以外,也常用于對「對象的形狀(Shape)」進行描述。(也就是對象里面的屬性或方法進行描述)
基礎用法
使用interface
關鍵字聲明接口
interface User {name: string,age: number,getName: () => string
}
let person: User = { name: 'fufu', age: 20, getName: function(): string { return this.name}}
定義只讀屬性
使用readonly
關鍵字限制接口中的參數是只讀 ,使用該接口的對象只有在第一次賦值的時候可以對可讀屬性進行賦值操作。
interface User {readonly name: string,readonly age: number
}
let person: User = {name: 'fufu', age: 20}
person.name = 'dandan' // Cannot assign to 'name' because it is a read-only property.
有時候我們會想到如果我們定義一個只讀的接口,為什么不直接使用const聲明一個對象呢?
readonly
是’TS’ 在接口提出,只針對接口中的參數賦值后就禁止更改,而const
是
es6 提出的針對變量,不讓變量進行更改。其次const聲明一個對象只是內存地址不允許修改,但是里面的屬性是可以修改的。
最簡單判斷該用readonly還是const的方法是看要把它做為變量使用還是做為一個屬性。 做為變量使用的話用const,若做為屬性則使用readonly。
定義不確定屬性
很多時候我們并不確定對象里面有沒有該屬性,這個時候可以使用?
關鍵字進行說明
interface User {name?: string,age: number
}
let person: User = {age: 20}
索引簽名
那如果一個對象屬性很多,且都是不確定的情況下,我們應該如何聲明呢?如果使用?
則需要將所有可能出現的屬性定義出來,這肯定是不合理的。我們可以使用索引簽名的方式進行定義。
interface Person {name: string;age: number; [propName: string]: any;
}let tom: Person = {name: 'Tom',age: 25,height: 170
};
定義數組
接口除了用于定義對象結構外,還可以用于數組的定義,類似于元組。
interface arr {0: number,1: string
}let arr1: arr = [1, '1']
arr1.push(1) // Property 'push' does not exist on type 'arr'.
當然他肯定與元組也是有區別的。元組雖然是定義已知類型和和長度的數組,但是使用push
依舊可以改變數組長度。使用interface
即使使用push
也依舊無法修改數組長度。
繼承
接口是可以繼承與被繼承的,并且繼承可以同時繼承多個接口。
interface A {name: string
}interface B {age: number
}interface User extends A , B {gender: boolean
}let user:User = {age: 20,name: 'fufu',gender: true
}
注意如果在繼承過程中發現相同屬性但卻類型不同,會判斷當前類型是否兼容之前的類型
interface A {name: string
}interface B {gender: boolean,
}interface User extends A , B {gender: any, //如果設置為string則報錯age: number
}let user:User = {age: 20,name: 'fufu',gender: '1'
}