将第三方 React 组件与 Fable/Elmish 一起使用

Question

我正在尝试将 Carbon Design System - React SDK 集成到 Fable/Elmish 应用程序中，看起来我必须为每个组件创建 property type definitions（其中一些我只是猜到了）才能使用它。

组件已经has TypeScript definitions in.

---

我真的必须为我想尝试或使用的每个 React 组件手动创建类型定义吗？

是否有一种简单或自动的方法可以从 F# 代码中使用 React 组件，而无需为我想尝试的每个组件编写属性类型定义？

F# 社区的人们如何使用来自 React 生态系统的组件？

---

我尝试过ts2fable，但它会生成无效的不可靠代码：Example，其中大多数行都有错误，我还转换了依赖项（typings/shared.d.ts 和 React 类型定义）

我也在查看TypeProviders，但不确定这是否可以解决我的问题。

Answer 1

我真的必须为我想尝试或使用的每个 React 组件手动创建类型定义吗？

您不必创建类型定义。相反，您可以使用 Fable 提供的动态模块编写非类型安全的 F# 代码。

是否有一种简单或自动的方法可以从 F# 代码中使用 React 组件，而无需为我想尝试的每个组件编写属性类型定义？

目前有（不完善的）ts2fable 工具，或者您可以编写无类型的 F# 代码，注意输出将在 JavaScript 中具有正确的“形状”。

F# 社区的人们如何使用来自 React 生态系统的组件？

一些常见的库具有在 Nuget 上可用的 F# 绑定。否则，您将需要自己编写一些绑定，可能使用 ts2fable。

这绝对是 Fable 目前的痛点。

---

例如，假设 JavaScript 库需要这样的 props 对象：

{
  foo: 1,
  bar: [ "a", "b", "c" ],
  qux: "hello"
}

然后我们可以像这样在 Fable 中创建它：

open Fable
open Fable.Core
open Fable.Core.JsInterop

let props = 
  createObj [
    "foo" ==> 1
    "bar" ==> ResizeArray<_>([ "a"; "b"; "c" ])
    "qux" ==> "hello"
  ]

编译为...

export const props = {
    foo: 1,
    bar: ["a", "b", "c"],
    qux: "hello",
};

props 的 F# 类型是 obj。

==> 运算符只是为了方便。你也可以写：

open Fable
open Fable.Core
open Fable.Core.JsInterop

let props = 
  createObj [
    "foo", box 1
    "bar", box (ResizeArray<_>([ "a"; "b"; "c" ]))
    "qux", box "hello"
  ]

这非常适合尝试。但是，您将错过 F# 的一些强类型优势！这种权衡是否值得取决于您的用例。

---

理论上，可以编写一个类型提供程序，它采用 NPM 模块名称并返回适当的 F# 类型，可能利用 ts2fable。这将非常强大，但我认为尚未有人实现此功能。