酷客网接口可以继承其他的对象类型，这相当于将继承的对象类型中的类型成员复制到当前接口中。接口可以继承的对象类型如下：
- 接口。
- 对象类型的类型别名。
- 类。
- 对象类型的交叉类型。
接口的继承需要使用extends关键字。下例中，Circle接口继承了Shape接口。我们可以将Circle接口称作子接口，同时将Shape接口称作父接口。示例如下：
interface Shape {
name: string;
}
interface Circle extends Shape {
radius: number;
}
一个接口可以同时继承多个接口，父接口名之间使用逗号分隔。下例中 ，Circle接口同时继承了Style接口和Shape接口：
interface Style {
color: string;
}
interface Shape {
name: string;
}
interface Circle extends Style, Shape {
radius: number;
}
当一个接口继承了其他接口后，子接口既包含了自身定义的类型成员，也包含了父接口中的类型成员。下例中，Circle接口同时继承了Style接口和Shape接口，因此Circle接口中包含了color、name和radius属性：
interface Style {
color: string;
}
interface Shape {
name: string;
}
interface Circle extends Style, Shape {
radius: number;
}
const c: Circle = {
color: 'red',
name: 'circle',
radius: 1
};
如果子接口与父接口之间存在同名的类型成员，那么子接口中的类型成员具有更高的优先级。同时，子接口与父接口中的同名类型成员必须是类型兼容的。也就是说，子接口中同名类型成员的类型需要能够赋值给父接口中同名类型成员的类型，否则将产生编译错误。示例如下：
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，它不能够赋值给Style接口中string类型的color属性，因此产生编译错误。
如果仅是多个父接口之间存在同名的类型成员，而子接口本身没有该同名类型成员，那么父接口中同名类型成员的类型必须是完全相同的，否则将产生编译错误。示例如下：
interface Style {
draw(): { color: string };
}
interface Shape {
draw(): { x: number; y: number };
}
interface Circle extends Style, Shape {}
// ~~~~~~
// 编译错误
Circle接口同时继承了Style接口和Shape接口。Style接口和Shape接口都包含一个名为draw的方法，但两者的返回值类型不同。当Circle接口尝试将两个draw方法合并时发生冲突，因此产生了编译错误。
解决这个问题的一个办法是，在Circle接口中定义一个同名的draw方法。这样Circle接口中的draw方法会拥有更高的优先级，从而取代父接口中的draw方法。这时编译器将不再进行类型合并操作，因此也就不会发生合并冲突。但是要注意，Circle接口中定义的draw方法一定要与所有父接口中的draw方法是类型兼容的。示例如下：
interface Style {
draw(): { color: string };
}
interface Shape {
draw(): { x: number; y: number };
}
interface Circle extends Style, Shape {
draw(): { color: string; x: number; y: number };
}
Circle接口中定义了一个draw方法，它的返回值类型为“{ color: string; x: number; y: number }”。它既能赋值给“{ color: string }”类型，也能赋值给“{ x: number; y: number }”类型，因此不会产生编译错误。
酷客网相关文章：
评论前必须登录！
注册