Typescript学习之接口interface举例详解

interface Person {
      age: number,// 确定属性
      name?: string,// 可选属性（加问号即可）
      [propName: string]: any,// 任意属性
      readonly sex: string,// 只读属性
}
// 使用接口
const p = ref<Person>({
      age: 20,// 确定属性,不写会报错
      sex: '女',// 只读属性也是确定属性,不写会报错
      label1: '班花',// 任意属性1
      label2: '165',// 任意属性2
})

// 函数类型接口
interface Func {
      // 定于这个函数接收两个必选参数都是 number 类型，以及一个可选的字符串参数 desc，
      // 这个函数不返回任何值
      (x: number, y: number, desc?: string): number
}
// 使用
const sum: Func = function (x, y, desc = '') {
      // 等价于const sum: Func = function (x: number, y: number, desc: string): void {
      console.log(desc, x + y)
}
console.log(sum(1, 2))

// 接口继承接口：继承一个新的接口或者类，从父类或者接口继承所有的属性和方法
// 不可以重写属性，但可以重写方法 
interface classPerson extends Person1 {
      //在继承的基础上新找了个了一个teach方法，且返回值是string类型
      teach(): string;
}
// 类实现接口implements：实现一个新的类，从父类活接口实现所有的属性和方法，
// 同时可以重写属性和方法，包含一些新的功能
class classPerson2 implements Person1 {
      age = 20
      name = 'suosuo'
      sex = '女'
      say() {
            return '我的全名是小锁'
      }
}

// 混合类型接口
interface MixType {
      // 如果只有这么一个，那么这个接口是函数接口
      (x: number, y: number): number,
      // 还含有其他方法，那么这个接口就是混合接口
      add(x: number, y: number): number,
      // 还有另一个方法
      log(): void,
      (): void
}
// 调用
function sum() {
      let sum: MixType = (() => { }) as MixType;
      sum.add = (x: number, y: number) => { return x + y }
      sum.log = () => { }
}

const isShowModal = ref(false)
function open() {
      isShowModal.value = true
}