如何用Kotlin生成含AppComponent.annotations的Angular JavaScript代码？

我懂你现在的困扰——想把那段有效的Angular JS代码用Kotlin复现出来，之前尝试伴生对象没成功对吧？先明确你要生成的目标JS代码：

const AppComponent = function () { this.title = 'Angular Hello World Demo' };
AppComponent.annotations = [new ng.core.Component({ selector: 'hello-app', templateUrl: './app/app.component.html', styleUrls: ['./app/app.component.css'] })];

这段JS核心是两个部分：带属性初始化的构造函数，以及构造函数本身的静态annotations数组属性。要让Kotlin编译出完全匹配的代码，得用init块处理构造内赋值，再配合@JsStatic注解把伴生对象属性转为类的静态属性。

直接上正确的Kotlin代码：

import kotlin.js.JsStatic

class AppComponent {
    // 定义对应JS中this.title的属性
    var title: String = ""

    // init块会被编译到构造函数内部，完成属性初始化
    init {
        title = "Angular Hello World Demo"
    }

    companion object {
        // @JsStatic注解让该属性编译为AppComponent构造函数的静态属性
        @JsStatic
        val annotations = arrayOf(
            ng.core.Component(
                selector = "hello-app",
                templateUrl = "./app/app.component.html",
                styleUrls = arrayOf("./app/app.component.css")
            )
        )
    }
}

关键细节说明：

• init块：Kotlin的init代码块会嵌入类的构造函数中，完美对应JS构造函数里this.title的赋值逻辑。
• @JsStatic：这个注解是核心，它会把伴生对象里的annotations属性编译成AppComponent类的静态属性，完全匹配目标JS里AppComponent.annotations的结构。
• 数组处理：JS里的styleUrls是数组，所以Kotlin要用arrayOf生成对应的JS数组结构。

这样编译出来的JS代码就和你给出的目标代码结构完全一致了。

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