接口可以用來(lái)約束對(duì)象涧团、函數(shù)、以及類(lèi)的結(jié)構(gòu)和類(lèi)型
// 假設(shè)我們需要從后端拿取數(shù)據(jù)，渲染到頁(yè)面泌绣，就可以這么定義接口：
interface List { //interface定義List接口钮追，包含兩個(gè)成員
readonly id: number; //readonly代表只讀,不可修改
name: string;
// [x: string]: any; 字符串索引簽名，用任意的字符串去索引List阿迈，可以得到任意的結(jié)果
age?: number; //元媚？表示這個(gè)屬性可以有，也可以沒(méi)有(可選屬性)
}
interface Result { // interface定義Result接口
data: List[]
}
function render(result: Result) { // 定義渲染函數(shù)
result.data.forEach((value) => {
console.log(value.id, value.name)
if (value.age) {
console.log(value.age)
}
// value.id++ 聲明readonly后苗沧，++的話(huà)刊棕，會(huì)報(bào)錯(cuò)，說(shuō)只讀屬性不許修改
})
}
let result = {
data: [
{id: 1, name: 'A', sex: 'male'},
{id: 2, name: 'B', age: 10}
]
}
render(result)
//如果把result換成data:[]數(shù)組的格式傳入待逞，就會(huì)報(bào)錯(cuò)甥角。讓編譯器繞過(guò)類(lèi)型檢查的解決方式：
//1.賦值給變量
//2.render({} as Result)類(lèi)型斷言： 表示明確的告訴編譯器，這個(gè)對(duì)象的類(lèi)型就是Result
//3.render(<Result>{}) 建議使用第一種飒焦，這種方法在react中會(huì)產(chǎn)生歧義
當(dāng)你不確定一個(gè)接口中有多少個(gè)屬性的時(shí)候蜈膨，就可以使用可索引類(lèi)型的接口。
共有支持兩種索引簽名：字符串和數(shù)字牺荠。 可以同時(shí)使用兩種類(lèi)型的索引翁巍，但是數(shù)字索引的返回值必須是字符串索引返回值類(lèi)型的子類(lèi)型。 這是因?yàn)楫?dāng)使用 number來(lái)索引時(shí)休雌，JavaScript會(huì)將它轉(zhuǎn)換成string然后再去索引對(duì)象灶壶。 也就是說(shuō)用 100（一個(gè)number）去索引等同于使用"100"（一個(gè)string）去索引，因此兩者需要保持一致杈曲。
用數(shù)字索引的接口
//注意：數(shù)字索引簽名的返回值驰凛，一定要是字符串索引簽名返回值的子類(lèi)型？js會(huì)對(duì)類(lèi)型進(jìn)行轉(zhuǎn)換担扑，將number轉(zhuǎn)換成string恰响，這樣就能保持類(lèi)型的兼容性
interface StringArray {
[index: number]: string //用任意數(shù)字去索引StringArray，都會(huì)得到一個(gè)string涌献。
}
let chars: StringArray = ['a', 'b']
用字符串索引的接口
interface Names {
[x: string]: any; // 用任意的string去索引Names胚宦，得到的結(jié)果都是any
// y: number;
[z: number]: number; // 數(shù)字簽名的索引返回值一定要是字符串索引返回值的子類(lèi)型
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
