如何在Fable中创建带detail对象的CustomEvent？

你遇到的问题核心是：Fable中的CustomEventInit是接口而非F#记录类型，因此不能用记录表达式{ ... }直接初始化。以下是两种可行的实现方案：

方案一：用匿名记录快速实现（简单场景） #

Fable会自动将F#匿名记录编译为JavaScript对象，直接把它作为CustomEventInit参数传入即可：

// 定义要传递的detail数据
let detailData = {| name = "John" |}
// 创建带detail的CustomEvent
let evt = CustomEvent.Create("hello", {| detail = detailData |})
// 触发事件
elem.dispatchEvent evt

这种方式无需额外定义类型，适合结构简单的detail数据。

方案二：用泛型重载实现强类型支持（复杂场景） #

如果需要强类型校验，可以使用CustomEventInit<'T>的泛型版本，步骤如下：

1. 定义Detail数据类型 #

type Person = { name: string }

2. 创建泛型CustomEvent #

let personDetail = { name = "John" }
// 指定泛型参数，确保detail类型匹配
let evt = CustomEvent.Create<Person>("hello", {| detail = personDetail |})
elem.dispatchEvent evt

3. 监听事件并获取强类型Detail #

监听事件时，同样可以通过泛型CustomEvent<'T>获取强类型的detail：

elem.addEventListener("hello", fun (e: CustomEvent<Person>) ->
    printfn "收到的名字：%s" e.detail.name
)

补充说明 #

Fable的CustomEventType.Create通过[<Emit>]特性直接映射到JavaScript的new CustomEvent()构造函数，只要传入的对象结构符合JS的CustomEventInit规范（包含detail属性）就能正常工作。匿名记录是Fable中创建JS对象最便捷的方式，无需手动实现CustomEventInit接口。

内容的提问来源于stack exchange，提问作者Tom Waddell