TypeScript 接口的两种用法
1. 定义数据结构（数据模型/DTO）
在 agent.ts 中，接口用于定义数据结构，描述从 API 返回的数据形状：
``1:9:ui-vue3/src/api/agent.ts
export interface AgentEntity {
id: number
agentName: string
agentDescription: string
nextStepPrompt: string
availableToolKeys: string[]
namespace: string
className: string
}
typescript
// 接口定义方法签名的例子
export interface Calculator {
add(a: number, b: number): number
subtract(a: number, b: number): number
multiply(a: number, b: number): number
}这表示：一个 `AgentEntity` 对象必须包含这些属性，每个属性有特定类型。用于类型检查和自动补全。
### 2. 定义方法签名（契约）
接口也可以定义方法，例如：
// 实现这个接口的类 export class BasicCalculator implements Calculator { add(a: number, b: number): number { return a + b } subtract(a: number, b: number): number { return a - b } multiply(a: number, b: number): number { return a * b } }
## 为什么 `agent.ts` 中只有属性？
这个文件中的接口是数据模型（DTO），用于描述 API 请求/响应的数据结构，而不是定义行为（方法）。
- 属性接口：描述数据形状
- 方法接口：描述行为契约
## 实际使用示例
当调用 API 时，TypeScript 会检查返回的数据是否符合接口定义：
// TypeScript 知道 agents 是 AgentEntity[] 类型
// 可以安全地访问属性
agents.forEach(agent => {
console.log(agent.agentName) // ✅ TypeScript 知道这个属性存在
console.log(agent.id) // ✅ TypeScript 知道这个属性存在
console.log(agent.nonExistent) // ❌ TypeScript 会报错
})
`
总结
- 接口可以定义属性（数据）和方法（函数）
- 在 agent.ts` 中，接口只定义属性，因为它们是数据模型
- 如果需要定义行为，可以在接口中添加方法签名
- 这种用法在 TypeScript 中很常见，用于类型安全和代码提示