在 Fable/Elmish 中使用第三方 React 组件

Question

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

该组件已包含 TypeScript 定义。

---

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

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

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

---

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

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

Answer 1

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

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

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

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

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

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

这绝对是目前《神鬼寓言》的一个痛点。

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

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

然后我们可以在《寓言》中创建它，如下所示：

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",
};

的 F# 类型props是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。这将非常强大，但我认为还没有人实现这一点。