TypeScript接口

介绍

接口是对象的状态(属性)和行为(方法)的抽象(描述)

接口:是一种类型,是一种规范,是一种规则,是一个能力,是一种约束

接口的使用

(() => {
    // 需求:创建人的对象,需要对人的属性进行一定的约束
    // id是number类型,必须有,只读的name是string类型,必须有
    // age是number类型,必须有
    // sex是string类型,可以没有

    // 定义一个接口,该接口作为person对象的类型使用,限定或者是约束该对象中的属性数据
    interface IPerson {
        // readonly id是只读的,是number类型, const修饰属性,想要设置该属性是只读的,是不能使用的
        readonly id: number,
        name: string,
        age: number,
        // ?可有可无
        sex?: string
    }

    // 定义一个对象,该对象的类型就是我定义的接口IPerson
    const person: IPerson = {
        id: 1,
        name: '小甜甜',
        age: 18,
        sex: '女'
    }

    console.log(person)
})()

函数类型的使用

(() => {
    // 函数类型:通过接口的方式作为函数的类型来使用

    // 定义一个接口,用来作为某个函数的类型使用
    interface ISearchFunc {
        // 定义一个调用签名
        (source: string, subString: string): boolean
    }
    // 定义一个函数,该类型就是上面定义的接口
    const searchString = function (source: string, subString: string): boolean {
        // 在source字符串中查找subString这个字符串
        return source.search(subString) > -1;
    }

    // 调用函数
    console.log(searchString('我又变帅了', '我又变丑了'))
})()

类类型的使用

// 类类型
(() => {

    // 定义一个接口
    interface IFly {
        // 该方法没有任何的实现(方法中什么都没有)
        fly(): void
    }

    // 定义一个类,这个类的类型就是上面定义的接口(实际上也可以理解为,IFly接口约束了当前的这个Person类)
    class Person implements IFly {
        // 实现接口中的方法
        fly() {
            console.log("我是猪")
        }
    }

    // 实例化对象
    const person = new Person();
    person.fly();

    // 定义一个接口
    interface ISwim {
        swim(): void
    }

    // 定义一个类,这个类的类型就是IF1y和ISwim(当前这个类可以实现多个接口,一个类同时也可以被多个接口进行约束)
    class Person2 implements IFly, ISwim {
        fly(): void {
            console.log("我是野猪")
        }
        swim(): void {
            console.log("我是母猪")
        }
    }

    let person2 = new Person2();
    person2.fly();
    person2.swim();

    // 总结:类可以通过接口的方式,来定义当前这个类的类型
    // 类可以实现一个接口,类也可以实现多个接口,要注意,接口中的内容都要真正的实现

    // 1、定义了一个接口,继承其他的多个接口
    interface IMyFlyAndSwim extends IFly, ISwim { }

    // 定义一个类,直接实现IMyF1yAndSwim这个接口
    class Person3 implements IMyFlyAndSwim {
        fly(): void {
            console.log("我是野猪1")
        }
        swim(): void {
            console.log("我是母猪1")
        }
    }

    const person3 = new Person3();
    person3.fly();
    person3.swim();
    // 总结:接口和接口之间叫继承(使用的是extends关键字),类和接口之间叫实现(使用的是implements)
})()
上一篇:TypeScript配置属性


下一篇:Vue3中typescript编译遇到的问题(props的validator)