news 2026/2/12 8:44:24

TypeScript中的interface详细介绍

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
TypeScript中的interface详细介绍
interfaceTestTypeItem{name:string;value:string;checked?:boolean;// ? 表示可选属性}
  • interface 是 TypeScript 的一种类型定义方式,用来约束对象的结构。

  • 在这里,TestTypeItem 定义了 Test Type 对象 必须有 name 和 value 两个字符串属性,可选的 checked 属性表示是否被选中。

  • checked? 的问号表示这个属性可以有也可以没有(可选)

2. 为什么要用 interface

1. 类型安全

你在组件里处理 Test Type 的数组时,可以确保每个对象都有 name 和 value,避免写错属性名或类型。

testTypeList:TestTypeItem[]=[{name:'test1',value:'test1'},{name:'test2',value:'test2'}];

如果你写成 { name: ‘test1’, val: ‘test1’ },TypeScript 就会报错,因为 val 不在 TestTypeItem 中。

2. 代码提示 / 智能补全

编辑器可以自动提示 name、value 和 checked,减少错误,提高开发效率。

维护方便
后期如果 Test Type 对象需要加属性,比如 description,只需要改 interface,整个组件的类型检查都会更新。

3. interface 是否要单独放文件

不必须,可以写在同一个组件文件里,尤其是小组件或者仅在本组件使用时。

推荐做法:

  • 小型、局部使用的 interface:放在组件文件顶部。

  • 大型项目或者多个组件共享的 interface:放在单独的 .ts 文件里,例如 models/test-type-item.ts,然后通过 import 使用。

4. 你这个写法的意思

testTypeList:TestTypeItem[]=[{name:'test1',value:'test1'},{name:'test2',value:'test2'}];

声明了一个数组 testTypeList,数组的每个元素都符合 TestTypeItem 的结构。

数组类型 TestTypeItem[] 表示“TestTypeItem 类型的对象数组”。

后续你可以给这些对象动态加 checked 属性来标记选中状态。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/8 15:13:42

图形可视化:从简单到高级的 7 个步骤

原文:towardsdatascience.com/graph-visualization-7-steps-from-easy-to-advanced-4f5d24e18056 https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/f11219b4d9364394a30b8524c3756a4f.png Davis 的南方俱乐部图,图片…

作者头像 李华
网站建设 2026/2/3 0:34:19

AXI-A7.4.6 Atomic transaction signaling

AWATOP(Atomic Operation Type)是一个6位的AXI信号,专为支持原子操作而引入。它出现在写地址通道(AW)上,用于指示当前事务的原子操作类型和字节序信息。其编码规则如下: 默认值 0x00(0b000000):表示非原子操作,即普通写事务。 AtomicStore(0b01exxx):原子存储类…

作者头像 李华
网站建设 2026/2/5 11:05:00

交通信号仿真软件:Vistro_(5).交通流仿真设置

交通流仿真设置 在交通信号仿真软件中,交通流仿真是一个核心模块,它涉及到如何模拟车辆在交通网络中的行驶行为。本节将详细介绍如何在仿真软件中设置交通流仿真,包括仿真参数的配置、车辆生成、路径规划、交通流量控制等方面的内容。 1. 仿真…

作者头像 李华
网站建设 2026/2/6 1:31:55

全面解析OpenFace:5大核心技术实现实时面部行为分析

全面解析OpenFace:5大核心技术实现实时面部行为分析 【免费下载链接】OpenFace OpenFace – a state-of-the art tool intended for facial landmark detection, head pose estimation, facial action unit recognition, and eye-gaze estimation. 项目地址: http…

作者头像 李华
网站建设 2026/2/8 12:38:28

Java计算机毕设之基于java+springboot博客管理系统设计和实现基于springboot个人博客系统的设计与实现(完整前后端代码+说明文档+LW,调试定制等)

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围:&am…

作者头像 李华