1、TypeScript 接口繼承

和類一樣，接口也可以通過關(guān)鍵字 extents 相互繼承。接口繼承，分為：?jiǎn)卫^承和多繼承，即繼承多個(gè)接口。另外，接口也可以繼承類，它會(huì)繼承類的成員，但不包括具體的實(shí)現(xiàn)，只會(huì)把類的成員作為一種聲明。本文主要總結(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、多繼承

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

interface Color {
   color: string;
}

interface Shape {
   name: string;
}

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

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

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

4、接口繼承中的同名成員的兼容問題

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

4.1、同名成員的類型必須兼容

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

interface Style {
   color: string;
}

interface Shape {
   name: string;
}

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

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

4.2、同名成員的類型必須相同

如果僅是多個(gè)父接口之間存在同名的類型成員，而子接口本身沒有該同名類型成員，那么父接口中同名類型成員的類型必須是完全相同的，否則將產(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的方法，但兩者的返回值類型不同。當(dāng)Circle接口嘗試將兩個(gè)draw方法合并時(shí)發(fā)生沖突，因此產(chǎn)生了編譯錯(cuò)誤。

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

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方法，它的返回值類型為“{ color: string; x: number; y: number }”。它既能賦值給“{ color: string }”類型，也能賦值給“{ x: number; y: number }”類型，因此不會(huì)產(chǎn)生編譯錯(cuò)誤。

5、接口繼承類

接口可以對(duì)類實(shí)現(xiàn)繼承，但只能繼承類的成員，不會(huì)繼承類成員的實(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類繼承了Person類，已經(jīng)具有了Person中的成員，再去實(shí)現(xiàn)IPerson接口，即使不寫內(nèi)容也不會(huì)報(bào)錯(cuò)

class Gary implements IPerson{}

上述代碼會(huì)報(bào)錯(cuò)，直接實(shí)現(xiàn)接口就會(huì)報(bào)錯(cuò)，因?yàn)榻涌诶^承了Person類，所以接口中的屬性也應(yīng)該在類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)文章希望大家以后多多支持腳本之家！

最新評(píng)論