什么是接口
在面向?qū)ο笳Z言中玻淑,接口(Interfaces)是一個(gè)很重要的概念族壳,它是對行為的抽象括丁,而具體如何行動(dòng)需要由類(classes)去實(shí)現(xiàn)(implement)在跳。
TypeScript 中的接口是一個(gè)非常靈活的概念枪萄,除了可用于對類的一部分行為進(jìn)行抽象以外,也常用于對「對象的形狀(Shape)」進(jìn)行描述猫妙。
舉例:
interface Person {
name: string;
age: number;
}
let tom: Person = {
name: 'Tom',
age: 25
};
上面的例子中瓷翻,我們定義了一個(gè)接口 Person,接著定義了一個(gè)變量 tom割坠,它的類型是 Person齐帚。這樣,我們就約束了 tom 的形狀必須和接口 Person 一致彼哼。
定義接口的注意點(diǎn)
1对妄、接口一般首字母大寫
2、定義的變量比接口少了一些屬性是不允許的
3敢朱、多一些屬性也是不允許的
可選屬性
有時(shí)我們希望不要完全匹配一個(gè)形狀剪菱,那么可以用可選屬性:
interface Person {
name: string;
age?: number;
}
let tom: Person = {
name: 'Tom'
};
任意屬性
有時(shí)候我們希望一個(gè)接口允許有任意的屬性,可以使用如下方式:
interface Person {
name: string;
age?: number;
[propName: string]: any;
}
let tom: Person = {
name: 'Tom',
gender: 'male'
};
使用 [propName: string] 定義了任意屬性取 string 類型的值拴签。
PS: 一旦定義了任意屬性孝常,那么確定屬性和可選屬性的類型都必須是它的類型的子集:
interface Person {
name: string;
age?: number;
[propName: string]: string;
}
let tom: Person = {
name: 'Tom',
age: 25,
gender: 'male'
};
上例中,任意屬性的值允許是 string蚓哩,但是可選屬性 age 的值卻是 number构灸,number 不是 string 的子屬性,所以報(bào)錯(cuò)了岸梨。
只讀屬性
有時(shí)候我們希望對象中的一些字段只能在創(chuàng)建的時(shí)候被賦值喜颁,那么可以用 readonly 定義只讀屬性:
interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}
let tom: Person = {
id: 89757,
name: 'Tom',
gender: 'male'
};
tom.id = 9527;
例中,使用 readonly 定義的屬性 id 初始化后曹阔,又被賦值了半开,所以報(bào)錯(cuò)了。
注意: 只讀的約束存在于第一次給對象賦值的時(shí)候赃份,而不是第一次給只讀屬性賦值的時(shí)候
舉例:
interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}
let tom: Person = {
name: 'Tom',
gender: 'male'
};
tom.id = 89757;
上例中稿茉,報(bào)錯(cuò)信息有兩處,第一處是在對 tom 進(jìn)行賦值的時(shí)候,沒有給 id 賦值漓库。
第二處是在給 tom.id 賦值的時(shí)候,由于它是只讀屬性园蝠,所以報(bào)錯(cuò)了渺蒿。