Usa las librerías de Javascript en Kotlin

La última vez que utilicé Kotlin fue en diciembre de 2015, cuando lo usé para resolver un par de problemas de Project Euler.

Esta vez quiero probar su interoperabilidad con Javascript. Ahora mi pregunta es, ¿cómo importamos / usamos bibliotecas Javascript existentes en Kotlin? He visto a algunas personas usando la palabra key native , y solo quiero una breve explicación de esto.

Ya no hay native palabra key native , hay @native anotación @native . Actualmente, es una solución funcional y puedes usarla con la twig 1.0.x del comstackdor de Kotlin. Sin embargo, vamos a desaprobar esta anotación a favor de annotations extern , así que prepárese para reescribir su código eventualmente para la twig 1.1.x.

Cuando pones @native annotation en una class o en una function de nivel superior, suceden dos cosas:

  1. Su cuerpo no está comstackdo a JavaScript.
  2. El comstackdor hace reference a esta class o function directamente, sin el nombre del package ni el cambio.

Creo que es más fácil de explicar al proporcionar un ejemplo de una biblioteca de JavaScript:

 function A(x) { this.x = x; this.y = 0; } A.prototype.foo = function(z) { return this.x + this.y + z; } function min(a, b) { return a < b ? a : b; } 

y una statement de Kotlin correspondiente

 @native class A(val x: Int) { var y: Int = noImpl fun foo(z: Int): Int = noImpl } @native fun min(a: Int, b: Int): Int = noImpl 

Tenga en count que noImpl es un marcador de position especial que se requiere debido a las funciones no abstractas. Los cuerpos requeridos y las properties no abstractas requieren inicializadores. Por cierto, cuando reemplazamos @native con extern , nos noImpl de este noImpl .

Otro aspecto de la interoperación con bibliotecas JS es la inclusión de bibliotecas a través del sistema de modules. Lo sentimos, no tenemos ninguna solución ahora (pero vamos a lanzarla pronto). Ver propuesta . Puede usar la siguiente solución alternativa para node.js / CommonJS:

 @native interface ExternalModule { fun foo(x: Int) } @native fun require(name: String): dynamic = noImpl fun main(args: Array<String>) { val module: ExternalModule = require("externalModule") module.foo(123) } 

donde el module externo se declara así

 function foo(x) { return x + 1; } module.exports = { foo : foo }; 

Kotlin 1.1 introduce el modificador external que se puede usar para declarar funciones y classs escritas directamente en JS, ver http://kotlinlang.org/docs/reference/js-interop.html

Agregué un proyecto simple de barebone como un ejemplo de cómo hacer Kotlin2Js.

https://bitbucket.org/mantis78/gradle4kotlin2js/src

Aquí está el file gradle que es la receta principal.

 group 'org.boonhighendtech' version '1.0-SNAPSHOT' buildscript { ext.kotlin_version = '1.1.2-5' repositories { maven { url 'http://dl.bintray.com/kotlin/kotlin-dev/' } mavenCentral() } dependencies { classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" } } apply plugin: 'kotlin2js' repositories { maven { url 'http://dl.bintray.com/kotlin/kotlin-dev/' } mavenCentral() } dependencies { compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" } build { outputs.dir("web/") } build.doLast { copy { from 'src/main/webapp' into 'web/' include '**/*.html' include '**/*.js' include '**/*.jpg' include '**/*.png' } configurations.compile.each { File file -> copy { includeEmptyDirs = false from zipTree(file.absolutePath) into "${projectDir}/web" include { fileTreeElement -> def path = fileTreeElement.path path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/")) } } } } clean.doLast { file(new File(projectDir, "/web")).deleteDir() } compileKotlin2Js { kotlinOptions.outputFile = "${projectDir}/web/output.js" kotlinOptions.moduleKind = "amd" kotlinOptions.sourceMap = true } 

En primer lugar, puede asignar una variable dinámica y luego codificarla esencialmente como si codificara JavaScript dinámicamente.

p.ej

 val jQuery: dynamic = passedInJQueryRef jQuery.whateverFunc() 

Pero si su intención es escribirla, debe introducir types en la biblioteca externa. Una forma es hacer uso de las bibliotecas relativamente extensas de typedefs por https://github.com/DefinitelyTyped/DefinitelyTyped

Encuentra el ts.d allí, luego ejecuta ts2kt ( https://github.com/Kotlin/ts2kt ) para get tus files de Kotlin. Eso típicamente te lleva allí. Ocasionalmente, ciertas conversiones no están bien hechas. Tendrás que arreglar manualmente la conversión. Por ejemplo, la llamada de snapsvg.attr () de snapsvg toma "{}" pero se convirtió a una interfaz extraña.

Era

 fun attr(params: `ts$2`): Snap.Element 

Y lo reemplacé con

  fun attr(params: Json): Snap.Element 

Y funciona como un encanto.

  • ¿Qué hará HashMap (it)?
  • Cómo analizar JSON en Kotlin?
  • ¿Qué pasó cuando se ejecuta el código HashMap (it)?
  • Cómo usar la class ContextWrapper con subscribeWith
  • Casilla de verificación "Incluir soporte de Kotlin" no en Android Studio 3.0 Canary 5
  • kotlin: no se puede get la anotación de api de validation
  • ¿Se requiere la anotación @JsName para cada método?
  • Kotlin: ¿Puedes usar arguments con nombre para varargs?
  • Cómo restablecer el contenido de la vista de reciclador en la actividad de llamadas usando Kotlin
  • Consulta por key en Google Firebase
  • doAsync Kotlin-android no funciona bien