1、TypeScript 接口繼承

和類一樣，接口也可以通過關(guān)鍵字 extents 相互繼承。接口繼承，分為：單繼承和多繼承，即繼承多個接口。另外，接口也可以繼承類，它會繼承類的成員，但不包括具體的實現(xiàn)，只會把類的成員作為一種聲明。本文主要總結(jié)一下TypeScript 接口繼承，方便大家進行系統(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、多繼承

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

interface Color {
   color: string;
}

interface Shape {
   name: string;
}

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

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

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

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

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

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

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

interface Style {
   color: string;
}

interface Shape {
   name: string;
}

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

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

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

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

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

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

interface Circle extends Style, Shape {}
//        ~~~~~~
//        編譯錯誤

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

解決這個問題的一個辦法是，在Circle接口中定義一個同名的draw方法。這樣Circle接口中的draw方法會擁有更高的優(yōu)先級，從而取代父接口中的draw方法。這時編譯器將不再進行類型合并操作，因此也就不會發(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接口中定義了一個draw方法，它的返回值類型為“{ color: string; x: number; y: number }”。它既能賦值給“{ color: string }”類型，也能賦值給“{ x: number; y: number }”類型，因此不會產(chǎn)生編譯錯誤。

5、接口繼承類

接口可以對類實現(xiàn)繼承，但只能繼承類的成員，不會繼承類成員的實現(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{}

上述代碼不會報錯，因為Peter類繼承了Person類，已經(jīng)具有了Person中的成員，再去實現(xiàn)IPerson接口，即使不寫內(nèi)容也不會報錯

class Gary implements IPerson{}

上述代碼會報錯，直接實現(xiàn)接口就會報錯，因為接口繼承了Person類，所以接口中的屬性也應(yīng)該在類Yannis中定義并實現(xiàn)

6、參考

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

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

最新評論