二、TypeScript Interfaces 接口

---

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();