Example of calling the Kotlin method in JavaScript: javascriptkotlin

Example of calling the Kotlin method in JavaScript: javascriptkotlin

Examples of calling the Kotlin method in JavaScript

The Kotlin compiler generates normal JavaScript classes and functions and attributes that can be freely used in JavaScript code. However, you should remember some subtle things.

Isolate declaration with independent JavaScript

To prevent damage to global objects, Kotlin creates an object that contains all the Kotlin declarations in the current module. Therefore, if you name the module myModule, all declarations can be available in JavaScript through the myModule object. For example:

fun foo() = "Hello"

It can be called in JavaScript as follows:

alert(myModule.foo());

This does not apply when you compile the Kotlin module into a JavaScript module (for more information, see the JavaScript module ). In this case, there is no packaging object, but the Declaration is exposed as a corresponding type of JavaScript module. For example, for CommonJS scenarios, you should write:

alert(require('myModule').foo());

Package Structure

Kotlin exposes its package structure to JavaScript. Therefore, unless you define a declaration in the root package, you must use a fully qualified name in JavaScript. For example:

package my.qualified.packagenamefun foo() = "Hello"

It can be called in JavaScript as follows:

alert(myModule.my.qualified.packagename.foo());

@ JsName Annotation

In some cases (for example, to support overloading), The Kotlin compiler modifies the names of functions and attributes generated in JavaScript code. To control the generated name, you can use the @ JsName annotation:

// Module "kjs" class Person (val name: String) {fun hello () {println ("Hello $ name! ")} @ JsName (" helloWithGreeting ") fun hello (greeting: String) {println (" $ greeting $ name! ")}}

Now, you can use this class in JavaScript in the following ways:

Var person = new kjs. Person ("Dmitry"); // reference the module "kjs" person. hello (); // output "Hello Dmitry !" Person. helloWithGreeting ("Servus"); // output "Servus Dmitry !"

If the @ JsName annotation is not specified, the corresponding function name will contain the suffix calculated from the function signature, such as hello_61zpoe $.

Note that the Kotlin compiler does not apply this modifier to external declarations, so you do not have to use @ JsName on it. Another example worth noting is non-External classes inherited from external classes. In this case, no covered function will be modified.

@ JsName the parameter must be a constant string literal value, which is a valid identifier. The compiler reports an error when any attempt is made to pass a non-identifier string to @ JsName. The following example produces a compilation error:

@ JsName ("new C ()") // an error occurs in external fun newC ()

Indicates the Kotlin type in JavaScript

1. In addition to the kotlin numeric type mapped to the JavaScript Number of Kotlin. Long.
2. Kotlin. Char maps to JavaScript Number to indicate character code.
3. Kotlin cannot distinguish between numeric types (except kotlin. Long) at runtime, that is, the following code can work:

fun f() {  val x: Int = 23  val y: Any = x  println(y as Float)}

1. Kotlin retains the overflow semantics of kotlin. Int, kotlin. Byte, kotlin. Short, kotlin. Char, and kotlin. Long.
2. JavaScript does not contain 64-bit integers, so kotlin. Long is not mapped to any JavaScript Object, Which is simulated by a Kotlin class.
3. Kotlin. String ing to JavaScript String.
4. Kotlin. Any maps to JavaScript objects (such as new Object () and ).
5. Kotlin. Array maps to the JavaScript Array.
6. The Kotlin Set (I .e. List, Set, Map, etc.) is not mapped to any specific JavaScript type.
7. Kotlin. Throwable maps to JavaScript Error.
8. Kotlin retains the inertia object initialization in JavaScript.
9. Kotlin does not implement the inert initialization of top-level attributes in JavaScript.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!