首页 前端知识 Typescript 之接口 interface(详解)

Typescript 之接口 interface(详解)

2024-04-19 21:04:40 前端知识 前端哥 220 474 我要收藏

一、interface的基本含义

TS新增了一个重要概念:接口, 分为对象类型接口和函数类型接口

接口可以约束对象,函数,类的结构和类型,是一种代码协作必须遵守的契约

Interface 是一种描述对象或函数的东西。你可以把它理解为形状,一个对象需要有什么样的属性,函数需要什么参数或返回什么样的值,数组应该是什么样子的,一个类和继承类需要符合什么样的描述等等。接下来具体讲解对象类型接口、函数类型接口及混合类型接口。

二、对象类型接口

接口中可定义以下属性:

确定属性、可选属性、只读属性、任意属性(可以通过 as 或 [propName: string]: any 来制定可以接受的其他额外属性)

这里我们举得例子是在vue3中实现的:

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 还可以用来规范函数的形状。Interface 里面需要列出参数列表返回值类型的函数定义。写法如下:

  • 定义了一个函数接口
  • 接口接收三个参数并且不返回任何值
  • 使用函数表达式来定义这种形状的函数
// 函数类型接口
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

Interface 也可以用来定义一个类的形状。需要注意的是类 Interface 只会检查实例的属性,静态属性是需要额外定义一个 Interface;

定义类时,可以使类去实现一个接口

实现接口就是使类满足接口的要求

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

五、混合类型的 Interface

混合类型的接口就是使用同一个 Interface 来描述函数或者对象的属性或方法。

// 混合类型接口
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
}

六、总结

  • 接口就是用来定义一个类结构,定义一个类中应该包含哪些属性和方法,同时接口也可以当成类型声明去使用
  • 接口中的所有的属性都不能有实际的值
  • 接口只定义对象的结构,而不考虑实际值
  • 在接口中所有的方法都是抽象方法
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5322.html
标签
typescript
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!