typescript中的interface理解

typescript中的interface理解

1.简单理解interface

interface是一种自定义的类型检测规范

可以通过定义interface来作为对象型参数的类型检测

比如定义一个User类型的检测规范

typescript 复制代码
interface User{
  name:string,
  age:number,
  email?:string//?将email标记为可选属性
}

在使用User进行类型检测的时候

必须传入满足User的对象属性

typescript 复制代码
//比如下面这个函数,返回值必须得符合User的规范
//说明返回的对象必须为{name:"",age:0}或者{name:"",age:0,email:""}这样的类型
function setUser(usename:string,age:number,email?:string):User{
  return { name: username, age, email}
}

输出

typescript 复制代码
console.log(setUser("测试name",age:12))
//{ name: '测试name', age: 12, email: undefined }

2.interface的拓展

可以通过extends来在interface中加入其他interface的规范

typescript 复制代码
interface A{
  nameA:string
}
interface B{
  nameB:string
}
interface C extends A,B{
  nameC:string
}

此时interface c extends a,b{ nameC:string }就相当于

typescript 复制代码
interface C{
  nameA:string,
  nameB:string,
  nameC:string
}

使用C来进行检测时就得按照interface C 的规范

typescript 复制代码
const obj:C = {
  nameA:"这是A",
  nameB:"这是B",
  nameC:"这是C"
}
console.log(obj)
//{ nameA: '这是A', nameB: '这是B', nameC: '这是C' }

3.接口的实现类

用类来实现interface的时候,使用关键字implements来实现

需要把interface作为类最小实现规范,也就是类至少必须要实现interface的内容

类在满足interface的情况下也可以加其他的内容

下面的IUser接口,实现类至少需要实现getName()getAge(),才满足接口的规范

typescript 复制代码
interface IUser{
  getName():string,
  getAge():number
}

定义实现类AdminUser

typescript 复制代码
class AdminUser implements IUser{  
   private name:string
   private age:number
   constructor(adminName:string,adminAge:number){
    this.name=adminName
    this.age=adminAge
   }
   getName():string{//这个方法必须要有,且满足IUser的规范
    return this.name
   }
   getAge(): number {//这个方法必须要有,且满足IUser的规范
     return this.age
   }
   setName(newName:string):void{
    this.name = newName
   }
}

用类创建对象

typescript 复制代码
const admin = new AdminUser("管理员A",12)
admin.setName("管理员newName")
console.log(admin.getName())
// 管理员newName

补充

1.多态:一个类可以实现多个接口,一个接口也可以拓展多个接口的规范

2.索引签名: 只规范接口中属性的类型,不规范属性的名字时候

typescript 复制代码
interface testIndex {
  [key:string]: string; // 属性名为字符串,属性值也为字符串,但是不强制要求具体的属性名
}
const obj:testIndex={
  myKey:"这是我的Key"
}
console.log(obj)
// { myKey: '这是我的Key' }
相关推荐
kk不中嘞11 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
服务端技术栈11 小时前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!
前端·后端·微信小程序
一个很老的小萌新11 小时前
json 解析 [{“id“:1,“name“:“apple“},{“id“:2,“name“:“banana“}]
java·前端·json
yanlele12 小时前
前端面试第 78 期 - 2025.09.07 更新 Nginx 专题面试总结(12 道题)
前端·javascript·面试
影子信息12 小时前
el-tree 点击父节点无效,只能选中子节点
前端·javascript·vue.js
拜无忧12 小时前
完美圆角,渐变边框,兼容chrome 60,两层背景的视觉差
前端·css
徐小夕12 小时前
用Vue3写了一款协同文档编辑器,效果简直牛!
前端·javascript·vue.js
wangbing112512 小时前
界面规范8-文字
前端·javascript·html
盛夏绽放12 小时前
抽成独立组件库:微前端架构下公共组件共享的最佳实践
前端·有问必答
江拥羡橙12 小时前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos