我們在之前講過給變量進行類型聲明,Typescript會對值所具有的結(jié)構(gòu)進行類型檢查叠纷。在Typescript里,接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約崩泡。
之前罕容,我們講過給一個變量聲明對象類型是這樣的:
var obj : {name : string}
但是有了接口后泡挺,我們可以
interface dabao {
name : string;
age : num
}
var obj : dabao = {
name : 'cxh',
age : 12;
}
上面接口描述對象必須包含一個string類型的name屬性以及一個number類型的age屬性迫皱。
可選屬性
接口里的屬性不全都是必需的摊腋。 有些是只在某些條件下存在妄痪,或者根本不存在
interface dabao {
name : string;
age ?: number;
}
var obj : dabao = {
name : 'cxh'
}
只讀屬性
一些對象屬性只能在對象剛剛創(chuàng)建的時候修改其值哈雏。 你可以在屬性名前用 readonly來指定只讀屬性:
interface dabao {
readonly name : string;
readonly age : number;
}
var obj : dabao = {
name : 'cxh'
}
obj.name = 'xiaobao' //error
ReadonlyArray<T>
ReadonlyArray<T>類型與Array<T>相似,只是把所有可變方法去掉了衫生,因此可以確保數(shù)組創(chuàng)建后再也不能被修改:
let dabao : ReadonlyArray<number> = [1,2,3];
let dabao[2] = 3 //error
let dabao.length = 10 //error
屬性檢查
假如我們傳入
interface dabao {
name ?: string;
age ?: number
}
目的是得到可選name和age屬性的對象裳瘪,但是當(dāng)我們定義多余的屬性時,typescript會進行多余的檢查罪针,例如:
interface dabao {
name ?: string;
age ?: number;
}
let obj : dabao = {
name : 'cxh';
height : 180
}
//error 'height ' not expected in type 'dabao'
如果想要繞開檢查彭羹,有兩種方式:
第一
let obj = <dabao>{
name : 'cxh',
height :180
}
第二
interface dabao {
name ?: string;
age ?: number;
[propName: string] : any;
}
let obj : dabao = {
name : 'cxh',
height : 180
}
函數(shù)類型
interface dabao {
(name : string,age : number) : boolean
}
var fnc : dabao = function(name : string,age:number) : boolean{
return true
}
可索引的類型
可索引類型具有一個 索引簽名,它描述了對象索引的類型泪酱,還有相應(yīng)的索引返回值類型派殷。 讓我們看一個例子:
interface dabao {
[index:number] : string
}
let array: dabao;
array = ['cxh','ccc'];
上面例子里还最,我們定義了dabao接口,它具有索引簽名毡惜。 這個索引簽名表示了當(dāng)用 number去索引dabao時會得到string類型的返回值拓轻。
共有支持兩種索引簽名:字符串和數(shù)字。 可以同時使用兩種類型的索引经伙,但是數(shù)字索引的返回值必須是字符串索引返回值類型的子類型扶叉。 這是因為當(dāng)使用 number來索引時,JavaScript會將它轉(zhuǎn)換成string然后再去索引對象帕膜。
例如:
interface dabao{
[index: string]: number;
length: number; // 可以辜梳,length是number類型
name: string // 錯誤,`name`的類型與索引類型返回值的類型不匹配
}
類實現(xiàn)接口
interface dabao {
setName (n: string)
}
class Dabao implements dabao {
name : string;
setTime(n : string) {
this.name = n
}
}
接口描述了類的公共部分泳叠,而不是公共和私有兩部分作瞄。 它不會幫你檢查類是否具有某些私有成員。
接口繼承接口
interface xiaobao {
name : string;
}
interface dabao extends xiaobao {
age : number;
}
let obj = <dabao>{
name : 'cxh',
age : 18,
height : 180
}
console.log(obj)
混合類型
interface dabao {
setName(n : string);
age : number;
(height : number) : string;
}
var obj : dabao;
console.log(obj = <dabao>function(height){ return '1'+height})
console.log(obj.age = 12)
console.log(obj.setName = function(name:string) : string{return 'nihao'})
接口繼承類
class Control {
private state : any;
}
interface SelectableControl extends Control {
select(): string;
}
class Button implements SelectableControl{
}
class Control {
private state : any;
}
interface SelectableControl extends Control {
select(): string;
}
class Button implements SelectableControl{
select(): string {return ''}
}