Typescript 之接口 interface(详解)_ts interface-程序员宅基地

技术标签: 前端  ️️--TypeScript  typescript  javascript  

一、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
}

六、总结

  • 接口就是用来定义一个类结构,定义一个类中应该包含哪些属性和方法,同时接口也可以当成类型声明去使用
  • 接口中的所有的属性都不能有实际的值
  • 接口只定义对象的结构,而不考虑实际值
  • 在接口中所有的方法都是抽象方法
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41579104/article/details/131283046

智能推荐

待定系数法求不定积分中的待定系数法的拆分总结_不定积分待定系数法拆项规则-程序员宅基地

文章浏览阅读6.3w次,点赞132次,收藏182次。第一种情况:分母为整体次幂相乘。分子全部为常数用大写字母表示。如果为整体k次幂,就先把这个整体的1次幂写出来,第二项写这个整体的2次幂一直写到k次幂。第二种情况:无法分出整体次幂形式,而是一个多项式形式,此时分子也要写成多项式的形式,要写成分母次幂减一的多项式形式,其余和第一种情况一样。..._不定积分待定系数法拆项规则

PHP 基础知识-程序员宅基地

文章浏览阅读2.3k次。目录PHP基础 2PHP代码标记 2PHP注释 2PHP语句分隔符 2PHP变量 3常量 3数据类型 4流程控制 6文件 7函数 9闭包 11常用系统函数 12错误处理 13错误显示设置 15字符串类型 17字符串相关函数 19数组 21遍历数组 22数组的相关函数 25PHP基础PHP是一种运行在服务器端的脚本语言,可以嵌入到HTML中。 PHP代码标记在PHP历史中,可以使用多种标记来区分P..._php

for循环中定义两个变量的用法 遍历_for循环两个变量-程序员宅基地

文章浏览阅读2.7w次,点赞11次,收藏22次。for循环定义两个变量 转载▼分类: java今天遇到一个很有意思的for循环,里面定义了两个变量,写法如下for(int i=1,j=i+10;i<5;i++,j=i*2){ System.out.println("i="+i+ "j="+j); }打印结果如下:i=1 j=11i=2 j=4i=3 j=6i=4 j=8个人理解:1、int i=1,j=i+10 定义变量初始值 i=1,j=112、i<5 定义循环范围3、i++,j=i*2_for循环两个变量

Java环境变量配置-程序员宅基地

文章浏览阅读5k次,点赞3次,收藏16次。参考资料:JDK 安装 Java环境变量配置 详细教程WIN10 配置Java环境变量1. JDK下载2. JDK安装3. JDK 环境变量配置_java环境变量

docker启动命令,docker重启命令,docker关闭命令_重启docker-程序员宅基地

文章浏览阅读3.5w次,点赞7次,收藏25次。一.docker服务的命令启动:systemctl start docker守护进程重启:systemctl daemon-reload重启docker服务:systemctl restart docker / service docker restart关闭:docker service docker stop / docker systemctl stop docker二.关于docker容器的命令启动:docker start 容器ID或容器名1. 先查看已经暂停的容器实例信息_重启docker

java中的setLayOut(null)怎么理解-程序员宅基地

文章浏览阅读4.6k次,点赞3次,收藏16次。java中的setLayOut(null)_setlayout

随便推点

exposed beyond app through ClipData.Item.getUri()-程序员宅基地

文章浏览阅读382次。安卓调用摄像机录像的时候,出现了这个错误。http://blog.csdn.net/qq_23179075/article/details/70314473参考这个老哥说的:在Application类里加东西。其实就是自己写一个类,继承自Application:public class App extends Application {}然后这个类要在Manifest文件中:也就是加一个android:name=".App"引号中为自己写的那个类。然后重写这个类的onCreat_exposed beyond app through clipdata.item.geturi()

15秒创意分屏多画面开场pr视频模板素材下载-程序员宅基地

文章浏览阅读438次,点赞4次,收藏4次。Premiere分屏模板,15秒短视频开场pr分屏特效视频剪辑模板项目工程文件,可以编辑和自定义文字内容和替换图片或视频素材。用来展示照片或视频作品。

Linux挂载文件系统时出现遇到问题wrong fs type-程序员宅基地

文章浏览阅读1.3w次,点赞5次,收藏4次。运行挂载命令如 mount /dev/sdb1 mnt出现错误:mount: wrong fs type, bad option, bad superblock on /dev/sdc1,missing codepage or helper program, or other errorIn some cases useful info is found in syslog - trydmesg | tail or so.解决方法:检查该磁盘的文件系统,即运行命令:fsck -t ext4 /_wrong fs type

SaaS产品项目实施流程_saas系统实施-程序员宅基地

文章浏览阅读2.6k次。一、商务洽谈阶段【销售负责】1.初步接触:甲乙双方初步认识,互相介绍下需求和产品;【对接人,销售部、业务部、采购部】(1).输入:某大型活动、某渠道资源;(2).输出:客户直接的了解认识;2沟通交流:对现有产品价值和功能,跟客户演示介绍,介绍我们有什么;【对接人,销售部、业务部、采购部】(1).输入:现有产品支撑功能;(2).输出:客户的信任和业务满足;3.深入交流:对客户的需求,进行初步响应讨论和确认,沟通可以做什么;【业务部门,深入需求沟通,形成纪要】(1).输入:客户的信任;(2)._saas系统实施

Windows实现开机自启动指定程序的几种方式_windows自启动-程序员宅基地

文章浏览阅读3.8k次。在某些应用场景,出于操作便捷性,会需求在系统启动进桌面时就自动运行指定程式,免去了人工再次手动打开,提高了不少便捷性。放入后,可在任务管理器【Ctrl+shift+esc】或引导启动管理窗口【msconfig】确认查看是否添加成功。打开注册表编辑器,依次找到如下路径,找到shell值,双击打开,将数值数据区域填入要启动的程序路径,确认保存即可。【WIN+R】调出运行窗口,输入如下指令,打开启动文件夹,将要启动的程序或脚本文件,放入文件夹即可。开始菜单或F3,搜索【任务计划程序】,找到打开。_windows自启动

linux进程间全局变量,linux进程间通信-程序员宅基地

文章浏览阅读981次。进程间通信:每个人进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进程之间要交换数据必须通过内核,在内核中开辟一块缓存区,进程1将数据从用户空间拷到内核缓冲区,进程2再从内核缓冲区把数据读走,内核提供的这种机制叫做进程间通信(IPC)。管道:一种最基本的IPC机制,由pipe函数创建。#includeint pipe(int filedes[2]);调用pipe函数..._进程内的全局变量

推荐文章

热门文章

相关标签