TypeScript入門之interface

1.基礎(chǔ)屬性

interface Person {
    name: string, // 必須屬性
    readonly age: number, // 只讀屬性,聲明后不可改變
    sex?: string // 非必須屬性
}

2.跳過(guò)類型檢查

  • 變量聲明與定義分開,一起則會(huì)進(jìn)行類型校驗(yàn)
  • 使用斷言:即我很確定我在做什么,不用校驗(yàn)。如:js獲取節(jié)點(diǎn)后,對(duì)節(jié)點(diǎn)進(jìn)行屬性操作會(huì)校驗(yàn)節(jié)點(diǎn)為空,此時(shí)可使用斷言
  • 字符串索引:帶有任意數(shù)量的其它屬性
interface Data {
    name: string,
    age: string,
    [prop: string]: any // 任意數(shù)量的任意非name、age名字的屬性
}
let test = (params: Data) => {
    console.log(params)
}
let p1
p1 = {
    aaa: 'aaa'
}
test(p1) // 越過(guò)類型檢查
test({
    name:'1',age:'1',b:'2'
} as Data) // 使用斷言越過(guò)類型檢查
test({
    name:'1',age:'1',b:'2'// 報(bào)錯(cuò),b不存在在Data中
})  

3.函數(shù)類型

interface Fun {
    (p: Data): string // 參數(shù): 返回值類型
}
let f1: Fun = () => {
    return 'test'
} 

4.可索引的類型
數(shù)字索引,如 a[0];字符串索引,如:a['name']。
TypeScript支持兩種索引簽名:字符串數(shù)字。 可以同時(shí)使用兩種類型的索引,但是數(shù)字索引的返回值必須是字符串索引返回值類型的子類型。 這是因?yàn)楫?dāng)使用 number來(lái)索引時(shí),JavaScript會(huì)將它轉(zhuǎn)換成string然后再去索引對(duì)象。 也就是說(shuō)用 100(一個(gè)number)去索引等同于使用"100"(一個(gè)string)去索引,因此兩者需要保持一致。

class Animal {
    name: string
}
class Dog extends Animal { // 是Animal的子類
    sex: string
}
interface AnimalArray {
    [index: number]: Dog, // 數(shù)字索引的返回值Dog是字符串索引返回值A(chǔ)nimal的子類。反過(guò)來(lái)則會(huì)報(bào)錯(cuò)。
    [str: string]: Animal
}

5.類類型
接口描述了類的公共部分,而不是公共和私有兩部分。 它不會(huì)幫你檢查類是否具有某些私有成員。

6.繼承
(1)接口之間相互繼承
屬性名可以重復(fù),但是類型必須一致

interface A {
   name: string
}
interface B {
   age: number
}
// 接口可以繼承多個(gè)其他接口
// B可以有與A屬性名一樣的屬性名,但類型必須相同,否則C同時(shí)繼承A、B會(huì)報(bào)錯(cuò)
interface C extends A,B {
   sex: number
}
let c1: C = {
   name: 'abc',
   sex: 0,
   age: 10
}  

(2)接口繼承類
當(dāng)接口繼承了一個(gè)類類型時(shí),它會(huì)繼承類的成員但不包括其實(shí)現(xiàn)。 就好像接口聲明了所有類中存在的成員,但并沒(méi)有提供具體實(shí)現(xiàn)一樣。 接口同樣會(huì)繼承到類的private和protected成員。 這意味著當(dāng)你創(chuàng)建了一個(gè)接口繼承了一個(gè)擁有私有或受保護(hù)的成員的類時(shí),這個(gè)接口類型只能被這個(gè)類或其子類所實(shí)現(xiàn)(implement)。
個(gè)人理解:接口繼承類后,必須被該類或者其子類實(shí)現(xiàn)。因?yàn)楫?dāng)其繼承類后,默認(rèn)繼承類的成員,而其他類不存在該成員。

class D {
   private name: string
}
interface E extends D { // 接口E繼承D,則相當(dāng)于聲明了name屬性
   age: number
}
class F extends D implements E { // 正確,F(xiàn)是D類的子類
   age: number
}
class G implements E { // 即使聲明name屬性,也會(huì)報(bào)錯(cuò)
   age: number;
   name: string;
}  
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容