Kotlin to Javascript

by

Reference

最もメインの説明はここ

https://kotlinlang.org/docs/js-project-setup.html

Kotlin/JS projectとされていますが、実質としてKotlin Multiplatformの１プロジェクトとして規格されていますので、最もベーシックなProject Structureは以下が詳しいです

https://kotlinlang.org/docs/multiplatform-discover-project.html

React + KotlinのTutorial

https://kotlinlang.org/docs/js-project-setup.html

kotlinとjavascriptの型定義の対照表は以下

https://kotlinlang.org/docs/js-to-kotlin-interop.html#kotlin-types-in-javascript

Kotlin Multiplatform

Kotlin code setから、web (javascript), ios, android等の様々なplatformに使用可能なライブラリへ変換を行います。

Multiplatformは以下のページが詳しい

https://www.jetbrains.com/help/kotlin-multiplatform-dev/get-started.html

Sample Project

以下から選択的に作成可能です

https://kmp.jetbrains.com/?\_ga=2.33732897.1275672018.1707659898-600103476.1648039660&\_gl=119incbp\_gaNjAwMTAzNDc2LjE2NDgwMzk2NjA.\_ga\_9J976DJZ68\*MTcwNzY1OTg5OC40NC4xLjE3MDc2NTk5NTkuNTkuMC4w

KotlinからJavascriptのコードを生成する

上記の機能を使用することで、KotlinからJavascriptを作成し、JavascriptからKotlinライブラリを使用することができます。

以下がProject Structureです。

build/js下に個別パッケージごとに、build/dist下にバンドル化された単一のjavascript codeが生成されます。

build.gradle.ktsは以下です。

plugins {
    kotlin("multiplatform") version "1.9.22"
}

group = "org.example"
version = "1.0-SNAPSHOT"

repositories {
    mavenCentral()
}

kotlin {
    js{
        browser {
        }
        binaries.executable()
        generateTypeScriptDefinitions()
    }
    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlinx:multik-core:0.2.2")
                implementation("org.jetbrains.kotlinx:multik-default:0.2.2")
                implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8")
                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")
            }
        }
    }
}

generateTypeScriptDefinitions()を付与することで、Typescriptのためのt.dsを作成することが可能です。

https://kotlinlang.org/docs/js-ir-compiler.html#preview-generation-of-typescript-declaration-files-d-ts

また、JavascriptからKotlin Codeを使用するためにはJavascriptに対してexposeする対象を指定する必要があり、以下のように@JsExportアノテーションを付与します。

@OptIn(ExperimentalJsExport::class)
@JsExport
class BSplineFunc {

後は生成されたライブラリを使用したいモジュールにインポートすれば利用することができます