Question

我正在尝试为由点符号定义的类声明JavaScript代码：

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

我尝试了不同的方法，但是没有任何正确的方法。例如：

external class Google {
    val visualization: Visualization
    class Visualization {
        class AreaChart(element: Element?) {
            fun draw(chartDataTable: dynamic, options: dynamic)
        }
    }
}

external val google: Google

val chart = Google.Visualization.AreaChart(document.getElementById('chart_div'))

是Kotlin从未正确翻译过的。

我需要

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

但我无效：

  var Google$Visualization$AreaChart = Google.Visualization.AreaChart;
  var chart = new Google$Visualization$AreaChart(document.getElementById('chart_div'));

Answer 1

Kotlin注释JsQualifier可用于执行此操作。

将AreaChart放入其自己的文件中，并用@file:JsQualifier("google.visualization")标记该文件：

@file:JsQualifier("google.visualization")

import org.w3c.dom.Element

external class AreaChart(element: Element?) {
    fun draw(chartDataTable: dynamic, options: dynamic)
}

然后照常创建类AreaChart的新对象：

val chart = AreaChart(document.getElementById("chart_div"));

Kotlin将其编译为：

var AreaChart = google.visualization.AreaChart;
var chart;
Object.defineProperty(_, 'chart', {
    get: function () {
        return chart;
    }
});
chart = new AreaChart(document.getElementById('chart_div'));

不幸的是，在Kotlin JS编译器中有一个issue，它阻止了Google Charts花边加载与Kotlin创建的代码一起使用。

在https://discuss.kotlinlang.org/t/problem-with-declarations-added-by-kotlin-js/7177/4

中描述了解决该问题的方法

如何在Kotlin中声明JavaScript类“ google.visualization.AreaChart”？

1 个答案: