Interfaces 接口
接口是对象的属性和方法的抽象描述
比如：一个叫小猫的小黑狗正在吃骨头,一个叫小狗的小白猫正在吃猫粮… 动物都会有个名称、颜色、都有吃东西的方法
接口定义 interface
// 接口 用 interface 来定义
interface Animal {
name: string;
color: string;
eat(): void;
}
const dog: Animal = {
name: '小猫',
color: '黑',
eat(): void {
// 一个叫小猫的小黑狗正在吃骨头
console.log(`一个叫${this.name}的小${this.color}狗正在吃骨头`);
}
}
dog.eat();
const cat: Animal = {
name: '小狗',
color: '白',
eat(): void {
// 一个叫小狗的小白猫正在吃猫粮
console.log(`一个叫${this.name}的小${this.color}猫正在吃猫粮`);
}
}
cat.eat();
有小聪明就说了，我的狗就没名字，你定义的name让我传啥？？？
可选属性 ?
接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在,
带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 ? 符号。
// 接口 用 interface 来定义
interface Animal {
name?: string; //可选参数
color: string;
eat(): void;
}
const dog: Animal = {
name: '小猫',
color: '黑',
eat(): void {
// 一个叫小猫的小黑狗正在吃骨头
console.log(`一个叫${this.name}的小${this.color}狗正在吃骨头`);
}
}
dog.eat();
const cat: Animal = {
name: '小狗',
color: '白',
eat(): void {
// 一个叫小狗的小白猫正在吃猫粮
console.log(`一个叫${this.name}的小${this.color}猫正在吃猫粮`);
}
}
cat.eat();
const pig: Animal = {
color: '白蓝灰',
eat(): void {
// 一个叫undefined的小白蓝灰猪正在吃人参
console.log(`一个叫${this.name}的小${this.color}猪正在吃人参`);
}
}
pig.eat();
有天小狗的小白猫心血来潮,非要把自己搞成绿色，让我突然觉得他好陌生。为了避免这一点,决定不让他们染色。
只读属性 readonly
一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly 来指定只读属性
// 接口 用 interface 来定义
interface Animal {
name?: string;
readonly color: string;
eat(): void;
}
const cat: Animal = {
name: '小狗',
color: '白',
eat(): void {
// 一个叫小狗的小白猫正在吃猫粮
console.log(`一个叫${this.name}的小${this.color}猫正在吃猫粮`);
}
}
// cat.color = '布灵布灵'; // 无法分配到 "color" ，因为它是只读属性。
cat.eat();
readonly vs const
最简单判断该用 readonly 还是 const 的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const，若做为属性则使用 readonly
类类型
类实现接口
关键字 implements 接口名称
// 接口 用 interface 来定义
interface Animal {
name?: string;
readonly color: string;
eat(): void;
}
// 接口使用 用 关键字 implements
class Cat implements Animal {
name?: string;
readonly color: string;
constructor(color: string, name?: string) {
this.color = color;
this.name = name;
}
eat(): void {
console.log(`一个叫${this.name}的小${this.color}猫正在吃猫粮`);
}
}
const cat = new Cat('白', '小狗');
// 一个叫小狗的小白猫正在吃猫粮
cat.eat();
一个类实现多个接口
接口之间用,隔开
// 接口 用 interface 来定义
interface Animal {
name?: string;
readonly color: string;
eat(): void;
}
interface Hobby {
smoking(): void;
drinking(): void;
perm(): void;
}
class Cat implements Animal, Hobby {
name?: string;
readonly color: string;
constructor(color: string, name?: string) {
this.color = color;
this.name = name;
}
eat(): void {
console.log(`一个叫${this.name}的小${this.color}猫正在吃猫粮`);
}
smoking(): void {
console.log(`一个叫${this.name}的小${this.color}猫正在抽烟`);
}
drinking(): void {
console.log(`一个叫${this.name}的小${this.color}猫正在喝酒`);
}
perm(): void {
console.log(`一个叫${this.name}的小${this.color}猫正在烫头`);
}
yuFun(): void {
this.smoking();
this.drinking();
this.perm();
}
}
const cat = new Cat('白', '小狗');
// 一个叫小狗的小白猫正在抽烟
// 一个叫小狗的小白猫正在喝酒
// 一个叫小狗的小白猫正在烫头
cat.yuFun();
接口继承接口
随着社会的发展，现在的狗都新增了舔的功能，需要重新定义dog接口
interface Animal {
name?: string;
readonly color: string;
eat(): void;
}
interface Hobby {
smoking(): void;
drinking(): void;
perm(): void;
}
interface Dog extends Animal, Hobby {
lick(): void;
}
class ScDog implements Dog {
name?: string;
color: string;
eat(): void {
console.log(`一个叫${this.name}的小${this.color}狗正在吃骨头`);
}
smoking(): void {
console.log(`一个叫${this.name}的小${this.color}狗正在抽烟`);
}
drinking(): void {
console.log(`一个叫${this.name}的小${this.color}狗正在喝酒`);
}
perm(): void {
console.log(`一个叫${this.name}的小${this.color}狗正在烫头`);
}
lick(): void {
console.log(`舔得狗中狗，方为狗中皇`);
}
}
const scDog = new ScDog();
scDog.name = '不撕不葱';
scDog.color = '金色';
// 一个叫不撕不葱的小金色狗正在吃骨头
scDog.eat();
// 一个叫不撕不葱的小金色狗正在抽烟
scDog.smoking();
// 一个叫不撕不葱的小金色狗正在喝酒
scDog.drinking();
// 一个叫不撕不葱的小金色狗正在烫头
scDog.perm();
// 舔得狗中狗，方为狗中皇
scDog.lick();
|