Kotlin to Javascript

Uncategorized

2024.02.11

Reference
Kotlin Multiplatform
Sample Project
KotlinからJavascriptのコードを生成する

Reference

最もメインの説明はここ

Set up a Kotlin/JS project | Kotlin

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

The basics of Kotlin Multiplatform project structure | Kotlin

React + KotlinのTutorial

Set up a Kotlin/JS project | Kotlin

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

Use Kotlin code from JavaScript | Kotlin

Kotlin Multiplatform

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

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

Get started with Kotlin Multiplatform | Kotlin Multiplatform Development

Sample Project

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

Kotlin Multiplatform Wizard | JetBrains

Create your first multiplatform project using the Kotlin Multiplatform wizard for Android, iOS, and Desktop, or use one of the pre-made templates.

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を作成することが可能です。

Kotlin/JS IR compiler | Kotlin

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

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

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