TS第二讲 ----- 接口

本文详细介绍了 TypeScript 中接口的应用,包括约束对象属性、约束方法、约束类以及接口之间的继承关系。通过实例展示了如何定义接口,如何使用接口约束类的方法和属性,以及如何实现多个接口。此外,还探讨了接口之间的继承以及类与接口之间的实现关系。
摘要由CSDN通过智能技术生成

1、接口

1.1、定义一个接口,约束一个对象

定义一个接口,作为person对象的类型使用,从而限定该对象中的属性数据

需求: 创建人的对象, 需要对人的属性进行一定的约束

  • id是number类型, 必须有, 只读的 readonly
  • name是string类型, 必须有
  • age是number类型, 必须有
  • sex是string类型, 可以没有
 // 在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型
 interface IPerson {
     readonly id: number      // 表示 id是只读的,是number类型
     name: string   // 默认是必须有的
     age: number
     sex?: string   // ? 表示此属性可有可无
 }
 const person: IPerson = {
     id: 1,
     name: 'tom',
     age: 20,
 }
 console.log(person)
 // person.id = 100   // id属性,只读,无法修改,报错

 person.sex = 'woman'
 console.log(person)
 // person.desc = "说明"   // 不存在此属性,报错
1.2、定义一个接口,约束一个方法

定义一个接口,用来作为某个函数的类型使用,接口可以描述函数类型(参数的类型与返回的类型)

interface SearchFunc {
    // 定义一个调用签名
    (source: string, subString: string): boolean
}


// 定义一个函数,该类型就是上面定义的接口
const mySearch: SearchFunc = function (source: string, sub: string): boolean {
    return source.search(sub) > -1
}
console.log(mySearch('abcd', 'bc'))
1.3、定义一个接口,约束一个类

注意: 接口中的约束,必须在类中实现,而类中可以有其它任意数据

1.3.1、一个接口约束类 ---- implements
// 定义一个接口
interface IFly {
    fly()
}

// 定义一个类,这个类的类型就是上面定义的接口(也就是,IFly接口约束了当前这个Person类)
class Person implements IFly {   // implements 接口约束类
    fly() {
        console.log('飞了!')
    }

}
const person = new Person()
person.fly()
1.3.2、多个接口约束类 ---- implements

多个接口之间用 , 相连即可

// 定义一个接口
interface ISwim {
    swim()
}
interface IFly {
    fly()
}

// 定义一个类,这个类的类型是IFly 和 ISwim (一个类同时可以被多个接口约束)
class Person2 implements IFly,ISwim {
    fly() {
        console.log('又飞了!')
    }
    swim() {
        console.log('游走了!')
    }
    say(){
        console.log('我说!')
    }
}
const person2 = new Person2()
person2.fly()
person2.swim()
person2.say()
// 注意:接口中的约束,必须在类中实现,而类中可以有其它任意数据
1.3.3、接口之间的继承关系,形成新的接口
// 接口1
interface ISwim {
    swim()
}
// 接口2
interface IFly {
    fly()
}
// 接口3 继承接口1和接口2
interface ISmFly extends IFly,ISwim { }

class Person3 implements ISmFly {
    fly() {
        console.log('又飞了3!')
    }
    swim() {
        console.log('游走了3!')
    }
}
const person3 = new Person3()
person3.fly()
person3.swim()

2、接口与接口、接口与类的关系

  • 接口和接口之间叫继承----- extends
  • 类和接口之间叫实现 ----- implements
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值