Kotlin Examples > Kotlin JS

2022-03-16 작성완료

dynamic

---

dynamic은 코틀린/js의 특별한 타입이다. 이것은 기본적으로 코틀린의 타입 확인자(체커)를 끈다. 이것은 타입이 없거나 루즈하게 타입이 설정되어 있는 자바스크립트와 같은 환경과 상호운용하기 위해 필요하다.

val a: dynamic = "abc"                                               // 1
val b: String = a                                                    // 2

fun firstChar(s: String) = s[0]

println("${firstChar(a)} == ${firstChar(b)}")                        // 3

println("${a.charCodeAt(0, "dummy argument")} == ${b[0].toInt()}")   // 4

println(a.charAt(1).repeat(3))                                       // 5

fun plus(v: dynamic) = v + 2

println("2 + 2 = ${plus(2)}")                                        // 6
println("'2' + 2 = ${plus("2")}")

1. 어떤 값이든 dynamic 변수 값으로 할당될 수 있다.
2. dynamic 값은 어떤 것에든 할당될 수 있다.
3. dynamic 변수는 어떤 함수에든 아규먼트로써 전달될 수 있다.
4. 어떤 프로퍼티든, 또는 어떤 아규먼트를 가진 함수이든 dynamic 변수에서 호출될 수 있다.
5. dynamic 함수에서 호출된 함수는 언제나 다이나믹 값을 반환한다. 그러므로 호출 체인이 가능하다.
6. 연산자, 할당, 그리고 인덱스를 통한 접근([..])은 "있는 그대로(as is)" 변환되므로 조심해야 한다.

JS function

---

js("...") 함수를 사용해 코틀린 코드에 자바스크립트 코드를 인라인할 수 있다. 매우 조심스럽게 사용해야 한다.

js("alert(\"alert from Kotlin!\")") // 1

1. 코틀린 함수에서 자바스크립트 alert를 보낸다.

val json = js("{}")               // 1
json.name = "Jane"                // 2
json.hobby = "movies"

println(JSON.stringify(json))     // 3

1. 자바스크립트 객체 리터럴을 생성한다. js(...) 함수의 리턴 타입은 dynamic이다.
2. dynamic 타입 기능을 이용해 프로퍼티를 추가한다.
3. JSON을 자바스크립트 API로 보낸다.

External declarations

---

external 키워드는 기존 자바스크립트 API를 type-safe한 방법으로 선언할 수 있도록 한다.

external fun alert(msg: String)   // 1

fun main() {
  alert("Hi!")                    // 2
}

1. 단일 String 아규먼트를 받는 기존 자바스크립트 함수 alert를 선언한다.
2. 일반 코틀린처럼 alert를 사용한다.

기존 자바스크립트 API 서술에 대해 더 많이 배우기 위해서는 문서를 참조해 주기 바란다.

Canvas (Hello Kotlin)

---

아래 예시는 HTML5 캔버스를 코틀린에서 사용하는 방법을 보여준다.

여기 두 이상한 생물들이 코틀린 로고를 보고 있다. 이 생물들과 코틀린 로고를 드래그 앤 드롭할 수 있다. 더블클릭으로 생물들을 추가할 수 있다. 그들이 당신을 볼 테니까 조심하자! (예시 참고)

CanvasState(canvas).apply {
    addShape(Kotlin)
    addShape(Creature(size * 0.25, this))
    addShape(Creature(size * 0.75, this))
}

Html Builder

---

코틀린은 빌더를 사용하여 선언적 스타일로 구조화된 데이터를 설명하는 옵션을 제공한다.

아래는 type-safe Groovy-style builder의 예시이다. 이 에시에서, HTML 페이지를 코틀린 내에서 describe할 수 있다.

val result = html {                                            // 1
    head {                                                     // 2
        title { +"HTML encoding with Kotlin" }
    }
    body {                                                     // 2
        h1 { +"HTML encoding with Kotlin" }
        p {
            +"this format can be used as an"                   // 3
            +"alternative markup to HTML"                      // 3
        }

        // an element with attributes and text content
        a(href = "http://kotlinlang.org") { +"Kotlin" }

        // mixed content
        p {
            +"This is some"
            b { +"mixed" }
            +"text. For more see the"
            a(href = "http://kotlinlang.org") {
                +"Kotlin"
            }
            +"project"
        }
        p {
            +"some text"
            ul {
                for (i in 1..5)
                li { +"${i}*2 = ${i*2}" }
            }
        }
    }
}

1. html은 사실 아규먼트로 람다 표현식을 받는 함수 호출이다. html 함수는 그 자체가 함수인 하나의 파라미터를 받는다. 함수의 타입은 HTML.() -> Unit으로, 리시버가 있는 함수 타입이다. 이것은 HTML 타입 인스턴스(리시버)를 함수에 전달해야 하며, 이 인스턴스의 멤버들을 함수 내부에서 호출할 수 있음을 뜻한다.

2. head와 body는 HTML 클래스의 멤버 함수이다.

3. unaryPlus() 연산을 호출함으로써 태그에 텍스트를 추가할 수 있다. 예: +"HTML encoding with Kotlin".