接口

作用：TypeScript 中引入了接口，用来限制对象的结构与类型

基本使用

规范：一般定义接口 使用 大写 I 开头 例如 BoyFriend 写成 IBoyFriend

示例1

//声明接口
interface IBoyFriend{
    name: string;
    age: number;
    readonly id:string; // 只读
    sex?:string; // 可选
    // 限定对象的方法的返回值  方式1
    cook():void;
    // 限定对象的方法的返回值  方式2
    cook:()=>void
}

//声明对象 满足接口结构与类型要求
let zhangsan: IBoyFriend = {
    name: '张三',
    age: 18,
    id:1,
    sex:'男',
    cook():void{
        console.log('hello')
    }
}

示例2

//声明接口
interface IBoyFriend{
    name: string;
    age: number;
}
//声明对象 满足接口结构与类型要求
let zhangsan: IBoyFriend = {
    name: '张三',
    age: 18,
}

console.log(zhangsan);

示例2中，对象的属性不能多， 也不能少，属性值的类型也必须满足接口的要求

可选属性

如果某些属性不是固定的，只是某些条件下存在，可以使用可选属性配置

interface IBoyFriend{
    name: string,
    age: number,
    car ?: string
}

这样设置之后，对象中的 car 属性就不是必须的属性

只读属性

如果一些属性的值不允许修改，则可以使用『readonly』标志，这样一旦发现被修改，立即报错

interface IBoyFriend{
    readonly id: number,
    name: string,
    age: number,
    car ?: string
}

这样设置后， 如果修改 id 属性， 编译器就会报错

readonly 与 const 的功能很像，不过 readonly 是限制对象的属性， const 是限制变量的值

限制方法

接口除了可以限制属性类型之外，也可以对对象的方法进行限制

interface IBoyFriend{
    readonly id: number,
    name: string,
    age: number,
    car ?: string,
    cook: () => void  
    cook() : void
}

⚠️ 该接口要求对象必须要有 cook 方法且返回结果必须为 undefined

类与接口

之前接口只能限制单个对象的结构与类型，接口与类结合之后，可以约束一类对象的结构与类型

类实现一个接口，那么就要有该接口定义的所有的属性和方法

interface IBoyFriend {
    name: string;
    age: number;
    car ?: string;
    cook: () => void
}
// implements ： 实现
class Person implements IBoyFriend{
    name: string;
    age: number;
    car: string;

    constructor(name: string, age: number, car: string){
        this.name = name;
        this.age = age;
        this.car = car;
    }

    cook(){
        console.log('我可以做蛋炒饭~~');
    }
}

类的多实现

一个类可以同时实现多个接口，类必须要包含所有对应的属性和方法才能通过编译

interface IBoyFriend{
    readonly id: number,
    name: string,
    age: number,
    car ?: string,
    cook: () => void  
}

interface IStaff{
    name: string
    age: number
    programTS: () => void;
}

class Person implements IBoyFriend, IStaff{
    //对象属性
    id:number
    name: string
    age: number

    //构造方法
    constructor(id: number, name: string, age: number){
        this.id = id;
        this.name = name;
        this.age = age;
    }

    //对象的方法
    cook(): void{
        console.log('做方便面。。。');
    }

    //对象方法
    programTS(){
        console.log('我可以编写 TypeScript');
    }
}

⚠️ 类实现接口时, 类可以包含比接口更多的属性, 但是接口要求的属性和方法必须要有

接口的继承

当接口中出现重复结构时，可以对公共部分进行抽离，然后通过继承来简化代码

interface IBasicInfo{
    name: string,
    age: number,
}

interface IBoyFriend extends IBasicInfo{
    readonly id: number,
    car ?: string,
    cook: () => void  
}

interface IStaff extends IBasicInfo{
    programTS: () => void;
}

接口的多继承

一个接口可以继承多个接口

interface IA {
    a: number;
    b: number;
}

interface IB{
    c: number;
}


interface ID extends IA, IB{
    d: number;
}

接口的重复声明

接口是允许重复声明的, 变量如果指定为该类型, 必须要将所有同名接口的结构都实现，重复定义的属性和方法，都会成为该接口的限定

interface IPerson{
  name: string;
}

interface IPerson{
  age: number;
}

let me: IPerson = {
  name: 'xxx',
  age: 18
}