1、TypeScript 接口繼承

和類(lèi)一樣，接口也可以通過(guò)關(guān)鍵字 extents 相互繼承。接口繼承，分為：?jiǎn)卫^承和多繼承，即繼承多個(gè)接口。另外，接口也可以繼承類(lèi)，它會(huì)繼承類(lèi)的成員，但不包括具體的實(shí)現(xiàn)，只會(huì)把類(lèi)的成員作為一種聲明。本文主要總結(jié)一下TypeScript 接口繼承，方便大家進(jìn)行系統(tǒng)化的學(xué)習(xí)。

2、單繼承

interface Shape {
   name: string;
}

interface Circle extends Shape {
   radius: number;
}

let circle = {} as Circle;
 
// 繼承了 Shape 的屬性
circle.name = "circle";

circle.radius = 10;

3、多繼承

接口能夠像類(lèi)一樣對(duì)接口進(jìn)行繼承，但不同的是類(lèi)只能是單繼承，而接口既可以實(shí)現(xiàn)單繼承也可以多繼承，多個(gè)接口以逗號(hào)分隔。

interface Color {
   color: string;
}

interface Shape {
   name: string;
}

interface Circle extends Color, Shape {
   radius: number;
}

當(dāng)一個(gè)接口繼承了其他接口后，子接口既包含了自身定義的類(lèi)型成員，也包含了父接口中的類(lèi)型成員。下例中，Circle接口同時(shí)繼承了Style接口和Shape接口，因此Circle接口中包含了color、name和radius屬性：

const c: Circle = {
   color: 'red',
   name: 'circle',
   radius: 10
};

4、接口繼承中的同名成員的兼容問(wèn)題

在接口繼承中，可能會(huì)出現(xiàn)同名成員，面對(duì)同名成員這種情況，怎么處理呢？主要分為以下兩種情況：

4.1、同名成員的類(lèi)型必須兼容

如果子接口與父接口之間存在同名的類(lèi)型成員，那么子接口中的類(lèi)型成員具有更高的優(yōu)先級(jí)。同時(shí)，子接口與父接口中的同名類(lèi)型成員必須是類(lèi)型兼容的。也就是說(shuō)，子接口中同名類(lèi)型成員的類(lèi)型需要能夠賦值給父接口中同名類(lèi)型成員的類(lèi)型，否則將產(chǎn)生編譯錯(cuò)誤。示例如下：

interface Style {
   color: string;
}

interface Shape {
   name: string;
}

interface Circle extends Style, Shape {
   name: 'circle';
   color: number;
//  ~~~~~~~~~~~~~
//  編譯錯(cuò)誤：'color' 類(lèi)型不兼容，
//  'number' 類(lèi)型不能賦值給 'string' 類(lèi)型
}

Circle接口同時(shí)繼承了Style接口和Shape接口。Circle接口與父接口之間存在同名的屬性name和color。Circle接口中name屬性的類(lèi)型為字符串字面量類(lèi)型'circle'，它能夠賦值給Shape接口中string類(lèi)型的name屬性，因此是正確的。而Circle接口中color屬性的類(lèi)型為number，它不能夠賦值給Color接口中string類(lèi)型的color屬性，因此產(chǎn)生編譯錯(cuò)誤。

4.2、同名成員的類(lèi)型必須相同

如果僅是多個(gè)父接口之間存在同名的類(lèi)型成員，而子接口本身沒(méi)有該同名類(lèi)型成員，那么父接口中同名類(lèi)型成員的類(lèi)型必須是完全相同的，否則將產(chǎn)生編譯錯(cuò)誤。示例如下：

interface Color {
   draw(): { color: string };
}

interface Shape {
   draw(): { x: number; y: number };
}

interface Circle extends Style, Shape {}
//        ~~~~~~
//        編譯錯(cuò)誤

Circle接口同時(shí)繼承了Color接口和Shape接口。Color接口和Shape接口都包含一個(gè)名為draw的方法，但兩者的返回值類(lèi)型不同。當(dāng)Circle接口嘗試將兩個(gè)draw方法合并時(shí)發(fā)生沖突，因此產(chǎn)生了編譯錯(cuò)誤。

解決這個(gè)問(wèn)題的一個(gè)辦法是，在Circle接口中定義一個(gè)同名的draw方法。這樣Circle接口中的draw方法會(huì)擁有更高的優(yōu)先級(jí)，從而取代父接口中的draw方法。這時(shí)編譯器將不再進(jìn)行類(lèi)型合并操作，因此也就不會(huì)發(fā)生合并沖突。但是要注意，Circle接口中定義的draw方法一定要與所有父接口中的draw方法是類(lèi)型兼容的。示例如下：

interface Color {
   draw(): { color: string };
}

interface Shape {
   draw(): { x: number; y: number };
}

interface Circle extends Color, Shape {
   draw(): { color: string; x: number; y: number };
}

Circle接口中定義了一個(gè)draw方法，它的返回值類(lèi)型為“{ color: string; x: number; y: number }”。它既能賦值給“{ color: string }”類(lèi)型，也能賦值給“{ x: number; y: number }”類(lèi)型，因此不會(huì)產(chǎn)生編譯錯(cuò)誤。

5、接口繼承類(lèi)

接口可以對(duì)類(lèi)實(shí)現(xiàn)繼承，但只能繼承類(lèi)的成員，不會(huì)繼承類(lèi)成員的實(shí)現(xiàn)。

class Person{
       name:string = 'Tom'
       age: number = 20
       sayHello():void{
              console.log('Hello world');
       }
}

interface IPerson extends Person{

}

class Peter extends Person implements IPerson{}

上述代碼不會(huì)報(bào)錯(cuò)，因?yàn)镻eter類(lèi)繼承了Person類(lèi)，已經(jīng)具有了Person中的成員，再去實(shí)現(xiàn)IPerson接口，即使不寫(xiě)內(nèi)容也不會(huì)報(bào)錯(cuò)

class Gary implements IPerson{}

上述代碼會(huì)報(bào)錯(cuò)，直接實(shí)現(xiàn)接口就會(huì)報(bào)錯(cuò)，因?yàn)榻涌诶^承了Person類(lèi)，所以接口中的屬性也應(yīng)該在類(lèi)Yannis中定義并實(shí)現(xiàn)

6、參考

http://www.mybatis.cn/typescript/1981.html

到此這篇關(guān)于TypeScript 接口繼承的文章就介紹到這了,更多相關(guān)TypeScript 接口繼承內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！