我学的前端像java--接口篇

Posted 2021-06-18 前端世界升级打怪

学习vue新特性之前，先学习了ts，谁知道这ts给了我java既视感，但还是要好好学习，在学习ts的过程中，再回顾复习一下java，何乐而不为呢。

---

一：接口

---

接口：是一种类型，是一种规范，是一种规则，也是一种约束，接口是对象的状态（属性）和行为（方法）的抽象。

(()=>{
// 需求: 创建人的对象, 需要对人的属性进行一定的约束
  
    // id是number类型, 必须有, 只读的
    // name是string类型, 必须有
    // age是number类型, 必须有
    // sex是string类型, 可以没有
  
    // 定义一个接口,该接口作为person对象的类型使用,限定或者是约束该对象中的属性数据
   
interface IPerson{
 // readonly id是只读的,是number类型
readonly id:number
name:string
age:number
//?可有可无的
sex?:string
}
  // 定义一个对象,该对象的类型就是我定义的接口IPerson
const person:IPerson {
 id:1
name:'qiqi'
age:21
//sex:'男'//可有可无

}
//person.name='zhuzhu'
console.log(person)

})()

---

1:函数类型接口

---

为了使用接口表示函数类型，我们需要给接口定义一个调用签名

他就像是一个只有参数列表和返回值类型的函数定义，参数列表里的每一个参数都需要名字和类型。

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

//定义一个接口，用来作为某个函数类型使用
interface ISp{
//定义一个调用签名
(source:string,sub:string):boolean

}
//定义一个函数，该类型就是上面定义的接口
const person:ISp = function (source:string,sub:string):boolean{
//在source字符串中查找sub这个字符串
return source.search(sub)>=-1
}

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

---

2：类类型接口

// 类 类型: 类的类型,类的类型可以通过接口来实现
(() => {
    // 定义一个接口
    interface IFly {
      // 该方法没有任何的实现(方法中什么都没有)
      fly()
    }
  
    // 定义一个类,这个类的类型就是上面定义的接口(实际上也可以理解为,IFly接口约束了当前的这个Person类)
    class Person implements IFly {
      // 实现接口中的方法
      fly() {
        console.log('我会飞了,我是超人')
      }
    }
    // 实例化对象
    const person = new Person()
    person.fly()
  
    // 定义一个接口
    interface ISwim {
      swim()
    }
  
    // 定义一个类,这个类的类型就是IFly和ISwim(当前这个类可以实现多个接口,一个类同时也可以被多个接口进行约束)
    class Person2 implements IFly, ISwim {
      fly() {
        console.log('我飞了2')
      }
      swim() {
        console.log('我会游泳啦2')
      }
    }
    // 实例化对象
    const person2 = new Person2()
    person2.fly()
    person2.swim()
  
    // 总结: 类可以通过接口的方式,来定义当前这个类的类型
    // 类可以实现一个接口,类也可以实现多个接口,要注意,接口中的内容都要真正的实现
  
    // 定义了一个接口,继承其他的多个接口
    interface IMyFlyAndSwim extends IFly, ISwim { }
  
    // 定义一个类,直接实现IMyFlyAndSwim这个接口
    class Person3 implements IMyFlyAndSwim {
      fly() {
        console.log('我飞了3')
      }
      swim() {
        console.log('我会游泳啦3')
      }
    }
    const person3 = new Person3()
    person3.fly()
    person3.swim()
  
  
    // 总结:接口和接口之间叫继承(使用的是extends关键字),类和接口之间叫实现(使用的是implements)
  
  
  })()

---

结尾：

---

用好接口，能更方便代码的编写。