typescript中接口interface的理解

接口

1.接口的作用:可以在定义类的时候限制类的结构

2.接口中的属性都不能有实际的值

csharp 复制代码
interface myInter{
  name:string,
  sayHello():void
}

定义类,让类去实现接口

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

如下:

csharp 复制代码
class myClass implements myInter{
   name:string;
   constructor(name:string){
     this.name=name
   }
   sayHello(){
     console.log('hello')
   }
}

抽象类

1.以abstract 开头的类是抽象类,抽象类和其他类的区别不大,不能用来实例化(创建对象);

2.抽象类就是专门用来被继承的类

3.抽象类中可以添加抽象方法

csharp 复制代码
abstract class Animal{
   name:string;
   constructor(name:str){
   this.name=name
  // sayHello(){console.log('动物在叫')}
  
  //定义个抽象方法
  //抽象方法使用abstract开头,且没有方法体
  //抽象方法只能定义在抽象类中,子类必须对抽象方法重写
  abstract sayHello():void
}

//Dog继承Animal
class Dog extends Animal{
   sayHello(){console.log('汪汪叫')}//重写sayHello方法,不写会有错误提示
}

总结:抽象类和接口的区别

1.抽象类中可以有抽象方法,也可以有普通方法;接口里都是抽象方法

2.用抽象类的时候是extends 继承;用接口的时候用的是implements实现

接口和对象类型的区别

csharp 复制代码
type myType={name:string,age:number} 
interface myInterface{name:string,age:number}
interface myInterface{gender:string}


const obj:myInterface={name:'张三',age:26,gender:'男'}
const obj:myType={name:张三,age:26}

区别1:接口可以重复声明;对象类型不可以,只能申明一个

所以申明类型的时候,可以使用别名的形式(type 别名={}),也可以使用接口的形式

相关推荐
前端一课20 分钟前
Vue3 的 Composition API 和 Options API 有哪些区别?举例说明 Composition API 的优势。
前端
用户479492835691520 分钟前
都说node.js是事件驱动的,什么是事件驱动?
前端·node.js
晴殇i20 分钟前
前端架构中的中间层设计:构建稳健可维护的组件体系
前端·面试·代码规范
申阳40 分钟前
Day 7:05. 基于Nuxt开发博客项目-首页开发
前端·后端·程序员
Crystal3281 小时前
App端用户每日弹出签到弹窗如何实现?(uniapp+Vue)
前端·vue.js
摸着石头过河的石头1 小时前
Service Worker 深度解析:让你的 Web 应用离线也能飞
前端·javascript·性能优化
用户4099322502121 小时前
Vue 3中watch侦听器的正确使用姿势你掌握了吗?深度监听、与watchEffect的差异及常见报错解析
前端·ai编程·trae
1024小神1 小时前
Xcode 常用使用技巧说明,总有一个帮助你
前端
政采云技术1 小时前
音视频通用组件设计探索和应用
前端·音视频开发
不爱吃糖的程序媛2 小时前
Electron 如何判断运行平台是鸿蒙系统(OpenHarmony)
javascript·electron·harmonyos