Kotlin JS未在必要处添加new关键字的非js()函数解决方案

嘿，这个坑我之前踩过！Kotlin JS和原生JS的构造函数交互时，默认不会自动添加new关键字，这就导致Google Charts的实例化代码报错。不用js()函数也能完美解决，给你最实用的规范方案：

核心方案：用@JsConstructor注解声明外部构造函数 #

这是最符合Kotlin类型安全特性的做法，通过定义外部接口并标记构造函数，让编译器明确知道要生成带new的正确代码。

代码示例 #

如果你的项目是通过CDN加载全局google对象（大部分Google Charts的使用场景都是这样），直接定义如下外部对象即可：

external object google {
    object visualization {
        @JsConstructor
        class DataTable()

        @JsConstructor
        class PieChart(element: Element)
    }
}

// 调用方式和你最初写的完全一致！
val data = google.visualization.DataTable()
val chart = google.visualization.PieChart(document.getElementById("chart_div")!!)

如果是通过npm引入Google Charts，可加上模块注解适配：

@JsModule("google.visualization")
@JsNonModule
external object google {
    object visualization {
        @JsConstructor
        class DataTable()

        @JsConstructor
        class PieChart(element: Element)
    }
}

原理说明 #

@JsConstructor注解会告诉Kotlin编译器：这个类是原生JS的构造函数，调用时必须添加new关键字。编译后的JS代码会自动变成：

var data = new google.visualization.DataTable();
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

完全匹配Google Charts的实例化要求。

为什么原来的代码会报错？ #

Kotlin JS默认把google.visualization.DataTable()这种写法当成普通函数调用，而不是构造函数实例化，所以不会自动添加new。但Google Charts的DataTable和PieChart必须通过new来创建实例，这就直接导致了报错。

内容的提问来源于stack exchange，提问作者egorponomaryov