企业官网建设流程全解析

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 属性来标记选中状态。