24-ts中接口的继承接口和类

TypeScript中的接口继承

TpyeScript中的接口继承接口

​ typescript中我们定义接口的时候可以继承其他接口,如下代码中我们定义了一个二维坐标的接口TwoPoint,在定义了一个三维坐标接口继承二维接口,此时我们只需要在三维接口中定义z坐标,因为三维坐标接口继承了二维坐标接口,所以已经具有了x,y坐标。具体代码如下:

// 接口继承接口

interface TwoDPoint{
    x: number,
    y: number
}

interface ThreeDPoint{
    z: number
}

let point1:ThreeDPoint={
    //此时如果没有赋值x,y坐标的话编译器会报错
    x:100,
    y:100,
    z:100
}

​ 当我们需要同时继承原有的更多接口的时候,我们可以使用typescript中的多继承。具体语法如下:

interface 接口名 extends 接口1,接口2{
    
}

示例代码:

// 二维坐标接口
interface TwoDPoint{
    x: number,
    y: number
}
//三维坐标中的z坐标接口
interface ThreeDPoint{
    z: number
}

//四维坐标接口继承了二维坐标接口的x,y坐标和三维接口的z坐标
interface FourDPoint extends ThreeDPoint, TwoDPoint{
    //内还定义了四维坐标独有的时间坐标
    time: Date
}
//实例化四维坐标接口
let poi2: FourDPoint = {
    z: 100,
    x: 100,
    y: 100,
    time: new Date()
}

TypeScript中的接口继承类

​ typescript中的接口不仅可以通过extends关键字继承接口,还可以继承类。具体语法如下:

interface 接口名 extends 类名{
    
}

示例代码:

//定义了一个Bird类
class Bird{
    type: string = "画眉鸟"
    fly():void {
        
    }
}
//定义一个Fly接口继承Bird类
interface Fly extends Bird{

}
//由于Fly接口是继承Bird类的,所以在实例化的时候必须有type属性和fly方法
let flyingBird: Fly = {
    type: "啄木鸟",
    fly(): void {
        
    }

}

你可能感兴趣的:(css,html,typescript,多态,接口)