4

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

该组件已包含 TypeScript 定义。

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

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

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

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

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

4

1 回答 1

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

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。这将非常强大，但我认为尚未有人实施此功能。

于 2021-10-31T16:50:12.990 回答