【前端vue3】TypeScrip-interface(接口)和对象类型

对象类型

定义对象需要用到interface(接口),主要用来约束数据的类型满足格式

定义方式如下:

javascript 复制代码
interface Person {
    name: string;
    age: number;
}

如对象中与接口中的属性不一致会报错,必须保持一致

例如如下:

javascript 复制代码
interface Person {
    name: string;
    age: number;
}

const person: Person = {
    name:"小C学安全"
}
//会提示类型 "{ name: string; }" 中缺少属性 "age",但类型 "Person" 中需要该属性。ts(2741)

接口的重合和继承

重合interface,可以合并两个相同对象名的属性

例如:

javascript 复制代码
interface Person {
    name: string;
}
interface Person {
    age: number;
}
const person: Person = {
    name:"小C学安全",
    age: 20
}

继承interface,例如对象A可以继承对象B的属性

例如:

javascript 复制代码
interface PersonA {
    name: string;
}
interface PersonB extends PersonA {
    age: number;
}
const person: PersonB = {
    name:"小C学安全",
    age: 20
}

可选属性

可选属性就是该属性是可以不存在的

例如:

javascript 复制代码
interface PersonA {
    name: string;
    age?: number;
}

const person: PersonA = {
    name:"小C学安全",
}
//这样写是不会报错的

也可以这么写
interface PersonA {
    name: string;
    age?: number;

}

const person: PersonA = {
    name:"小C学安全",
    age: 20
}

任意属性

定义方式: [propName: string]

javascript 复制代码
interface PersonA {
    name: string;
    age?: number; //定义可选属性
    [propName: string]:any; //定义任意属性

}

const person: PersonA = {
    name:"小C学安全",
    age: 20,
    city: "北京"
}

以上代码中,PersonA并没有定义属性city,但是代码没有报错,是因为我们定义了任意属性

只读属性

只读属性是只能读取,但是不允许被赋值修改的

定义方式:在属性前加上readonly

例如:

javascript 复制代码
interface PersonA {
    readonly name: string;
    age?: number; //定义可选属性
    [propName: string]:any; //定义任意属性


}

const person: PersonA = {
    name:"小C学安全",
    age: 20,
    city: "北京"
}

person.name= "小白"

以上代码就会报错,会提示:

无法为"name"赋值,因为它是只读属性。ts(2540)

添加函数

可以给对象属性添加函数

例如:

javascript 复制代码
interface PersonA {
    readonly name: string;
    age?: number; //定义可选属性
    [propName: string]:any; //定义任意属性
    test : ()=>void; // 定义函数
}

const person: PersonA = {
    name:"小C学安全",
    age: 20,
    city: "北京",
    test: ()=>{
        console.log("定义函数成功")
    }
}

person.test()
相关推荐
孤水寒月1 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu1 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6662 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey2 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆2 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W2 小时前
uniapp全局状态管理实现方案
前端
Vertira2 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL3 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全