Kotlin/JS에서 Type Script의 유형 정의 파일을 생성하는 방법

Kotlin1.Kotlin/JS의 Kotolin 코드에서 TypeScript의 형식 정의 파일(.d.ts)이 4부터 생성된 것 같아서 살짝 만져봤어요.
이 기능은 IR 컴파일러 전용 기능으로 아직 프리뷰 버전이라 업무상 사용하기에는 이른 것 같습니다.
https://kotlinlang.org/docs/reference/js-ir-compiler.html#preview-generation-of-typescript-declaration-files-dts

형식 정의 파일 생성 기능 사용하기 준비

build.gradle.kts에서 IR 컴파일러를 사용하도록 설정

js의 첫 번째 매개 변수에 IR

지정

kotlin에서 설명binaries.executable()

...
kotlin {
    js(IR) { // ①
        browser {
				}
				binaries.executable() // ②
		}
}

사용법

1. 유형 정의를 생성하려는 아이템에 @JsExport 부여

※ 주의@JsExport 최고급 제품만

@JsExport
class TopLevelClass(val a: Int, var b: Int)

2.gradle build 실행

build/js/packages/{プロジェクト名}/kotlin/{プロジェクト名}.d.ts에서 형식 정의 파일을 생성합니다.

많이 해봤어요.

top level class

Kotlin 코드

@JsExport
class TopLevelClass(val a: Int, var b: Int)

.d.ts

export class TopLevelClass {
    constructor(a: number, b: number);
    readonly a: number;
    b: number;
}

extend class

Kotlin 코드

@JsExport
open class SuperClass(val superA: Int)

@JsExport
class SubClass(val subA: Int): SuperClass(1)

.d.ts

export class SuperClass {
    constructor(superA: number);
    readonly superA: number;
}
export class SubClass extends SuperClass {
    constructor(subA: number);
    readonly subA: number;
}

※ 부류가 @JsExport를 추가하지 않으면 부류의 유형 정의를 출력하지 않습니다.

top level data class

Kotlin 코드

@JsExport
data class DataClass(val a: Int, var b: Int)

.d.ts

export class DataClass {
    constructor(a: number);
    readonly a: number;
    component1(): number;
    copy(a: number): DataClass;
    toString(): string;
    hashCode(): number;
    equals(other: Nullable<any>): boolean;
}

Nested Class

Kotlin 코드

@JsExport
class OuterClass(val outerA: Int) {
    class NestedClass(val innerA: Int)
}

컴파일 오류...

e: java.lang.IllegalStateException: Can't find name for declaration CLASS CLASS name:NestedClass modality:FINAL visibility:public superTypes:[kotlin.Any]

Inner Class

Kotlin 코드

@JsExport
class OuterClass(val outerA: Int) {
    inner class InnerClass(val innerA: Int)
}

컴파일 오류...

e: java.lang.IllegalStateException: Can't find name for declaration CLASS CLASS name:InnerClass modality:FINAL visibility:public [inner] superTypes:[kotlin.Any]

interface

Kotlin 코드

@JsExport
interface Interface {
    fun method(a: Int): Int
    fun defaultMethod(a: Int): Int = a
    val field: Int
}

.d.ts

export interface Interface {
    method(a: number): number;
    defaultMethod(a: number): number;
    readonly field: number;
}

abstruct class

Kotlin 코드

@JsExport
abstract class AbstractClass(val a: Int)

.d.ts

export interface Interface {
    method(a: number): number;
    defaultMethod(a: number): number;
    readonly field: number;
}

object

Kotlin 코드

@JsExport
object Object {
    val a: Int = 1
}

컴파일 오류...

e: java.lang.IllegalStateException: Class Object with kind: OBJECT

companion object

Kotlin 코드

@JsExport
class A {
    companion object {
        fun method(): Int = 0
        val a: Int = 0
    }
}

컴파일 오류...

e: java.lang.IllegalStateException: Class DataClass.Companion with kind: OBJECT

top level function

Kotlin 코드

@JsExport
fun topLevelFunction(): Int = 0

export function topLevelFunction(): number;

Enum Class

Kotlin 코드

@JsExport
enum class Enum {
    A, B, C
}

컴파일 오류... @JsExport Enum에 설치할 수 없음

Declaration of such kind (enum class) cant be exported to JS

오존 상황 등은 youtrack에서 관리한다
https://youtrack.jetbrains.com/issues?q=%23{KJS: d.ts generation}&_ga=2.23992570.1134254226.1600398765-1301939789.1594112335

총결산

아직 프리뷰 문제가 많고 BUG가 많지만 유형 정의 파일을 생성할 수 있기 때문에 Kotlin/JS로 프로그램 라이브러리를 만드는 패턴이 늘어날 것 같아요.