javascript - 创建外观时如何在 scala-js 中正确键入 javascript 回调函数

Question

对于许多具有异步操作的 javascript 库，您会传递一个回调函数。我读过这个 SO question , this one too , 和 read the docs但是对于在创建外观时如何在 scala-js 中正确键入回调函数，我仍然有些困惑。我正在为 Cloudinary's upload widget 编写门面它有一个 openUploadWidget 方法，该方法接受选项和回调，就像他们文档中的以下示例:

cloudinary.openUploadWidget(
  { cloud_name: 'demo', upload_preset: 'a5vxnzbp'}, 
  function(error, result) { console.log(error, result) });

这是我目前在我的 scala-js facade 中实现的:

object Cloudinary {
  def openUploadWidget(
      options: WidgetOptions,
      callback: (Either[String, Seq[UploadResult]]) => Unit): Unit = {
    _Cloudinary.openUploadWidget(
        options, 
        (error: String, results: js.Array[js.Dynamic]) => {
            callback(Option(results)
                .filterNot(_.isEmpty)
                .map(_.toSeq.map(_.asInstanceOf[UploadResult]))
                .toRight(error))
        })
  }    
}    

@JSName("cloudinary")
object _Cloudinary extends js.Object {
  def openUploadWidget(
      options: WidgetOptions,
      callback: js.Function2[String, js.Array[js.Dynamic], _]): Unit = js.native
}

trait WidgetOptions extends js.Object {
  @JSName("cloud_name") val cloudName: String = js.native
  @JSName("upload_preset") val uploadPreset: String = js.native
}

object WidgetOptions {
  def apply(cloudName: String, uploadPreset: String): WidgetOptions = {
    js.Dynamic.literal(
      cloud_name = cloudName, 
      upload_preset = uploadPreset).asInstanceOf[WidgetOptions]
}

trait UploadResult extends js.Object {
  @JSName("public_id") val publicId: String = js.native
  @JSName("secure_url") val secureUrl: String = js.native
}

你会像这样使用它:

def callback(results: Either[String, Seq[UploadResult]]): Unit = {}

def show(): Unit = {
  Cloudinary.openUploadWidget(
      WidgetOptions(
          cloudName = "demo",
          uploadPreset = "a5vxnzbp"),
      callback _)
}

我实现了一个小的包装器来将 javascript 回调参数转换成更像 Scala 的东西，因为我不知道如何以更直接的方式输入回调。恕我直言，这还不错，但我暗暗怀疑我没有理解某些东西，它可以做得更好。

有什么帮助/建议吗？

Answer 1

感谢 Per Wiklander 提醒我们跟进此事。以下代码是我在实现建议并升级到 Scala.js 0.6.6 后确定的代码

import scala.scalajs.js
import scala.scalajs.js.annotation.JSName

object Cloudinary {
  type CloudinaryCallback = (Either[String, Seq[UploadResult]]) => Unit

  def openUploadWidget(
      options: WidgetOptions,
      callback: CloudinaryCallback): Unit = {
    _Cloudinary.openUploadWidget(options, (error: js.Dynamic, results: js.UndefOr[js.Array[UploadResult]]) => {
      callback(results
          .filterNot(_.isEmpty)
          .map(_.toSeq)
          .toRight(error.toString))
    })
  }
}

@js.native
@JSName("cloudinary")
object _Cloudinary extends js.Object {
  def openUploadWidget(
      options: WidgetOptions,
      callback: js.Function2[js.Dynamic, js.UndefOr[js.Array[UploadResult]], _]): Unit = js.native
}

@js.native
trait UploadResult extends js.Object {
  @JSName("public_id") val publicId: String = js.native
  @JSName("secure_url") val secureUrl: String = js.native
  @JSName("thumbnail_url") val thumbnailUrl: String = js.native
  @JSName("resource_name") val resourceName: String = js.native

  val `type`: String = js.native
  val path: String = js.native
  val url: String = js.native
  val version: Long = js.native
  val width: Int = js.native
  val signature: String = js.native
}

@js.native
trait WidgetOptions extends js.Object {
  @JSName("cloud_name") val cloudName: String = js.native
  @JSName("upload_preset") val uploadPreset: String = js.native
  @JSName("show_powered_by") val showPoweredBy: Boolean = js.native
  @JSName("cropping_default_selection_ratio") val croppingDefaultSelectionRatio: Double = js.native

  val sources: Array[String] = js.native
  val multiple: Boolean = js.native
  val cropping: String = js.native
  val theme: String = js.native
  val text: Map[String, String] = js.native
}

object WidgetOptions {
  def apply(cloudName: String, uploadPreset: String): WidgetOptions = {
    val map: Map[String, js.Any] = Map(
        "sources.local.title" -> "Local Files",
        "sources.local.drop_file" -> "Drop credit card image here",
        "sources.local.select_file" -> "Select File")

    js.Dynamic.literal(
        cloud_name = cloudName,
        upload_preset = uploadPreset,
        sources = js.Array("local"),
        multiple = false,
        cropping = "server",
        theme = "minimal",
        show_powered_by = false,
        cropping_default_selection_ratio = 1.0d,
        text = js.Dynamic.literal.applyDynamic("apply")(map.toSeq: _*)).asInstanceOf[WidgetOptions]
  }
}