在 Typescript 中定义对象回调的最佳方法？答案

【问题标题】：best way to define callbacks on objects in Typescript?在 Typescript 中定义对象回调的最佳方法？
【发布时间】：2017-05-04 23:41:45
【问题描述】：

我有一个侧边栏菜单组件，其中包含一个保存菜单项的服务。然后，多个来源可以根据需要更改菜单。

目前每个item都实现了SidebarItem：

export interface SidebarItem {
    name: string,
    link: Route|string,
    icon ?: string
}

但是我可以捕获某些事件（单击、悬停）并且希望有一个选项来定义侧边栏项目本身的回调。

我想知道实现这一目标的最佳方法。我应该在接口上定义两个属性，让每个人决定他们如何实现它，还是有什么选择？我不认为侧边栏项目可以是类，因为我不希望每个侧边栏项目都有一个新类。

如果有帮助，我还可以使用 aurelia 事件聚合器调度事件。

PS：如果这感觉很主观，请将标题改为“如何”。我提出的方法是一个疯狂的猜测，我认为它不正确。

【问题讨论】：

不清楚你在问什么。你是问如何在这个接口中包含对回调函数的引用？
一件事可能是提供不需要实现的约定方法（=> 不要将它们放在接口中），但是如果您想要该功能，则必须实现它们。堪比 Aurelia 组件生命周期方法（attached、bind 等）。它们不是必需的，但如果你想在附加组件之前做一些事情，你必须实现该方法。
@NitzanTomer 抱歉，如果不清楚。让我们以 Angular 2 组件为例。你可以创建一个组件类，但是当组件被销毁时你可能需要做一些事情。 Angular 2 方式，您将在组件上实现 OnDestroy 接口，然后在类上实现 ngOnDestroy() 方法。我的问题类似。例如，当用户单击菜单中的“取消帐户”按钮时，我想显示一个可确认的对话框。 1/2
在我看来，最好的方法是让 option 在项目上实现某些事件处理程序方法 - sidebarItem.onClick = function(event) { displayModal( ) } 我的问题是关于清楚地说该选项存在的正确方法。如果我在 SidebarItem 界面上添加类似 onClick ?: some-type 的内容，我可以获得 IDE 帮助，但我必须检查该属性是否存在于项目上，如果存在则调用事件处理程序，感觉就像一个黑客。我也考虑过 Angular 的方式，但我仍然希望对此提供反馈。 2/2
是的，您应该只在界面中添加onClick?: (e: MyEvent) => void。有点像反应。

【解决方案1】：

我最终在界面上使用了以下语法：

onClick?: (e: MyEvent) => void

感谢 cmets 的 Nitzan Tomer。

【讨论】：