Kotlin-js features.

Kotlin-js features.

十二月 18, 2018

About kotlin-multiplatform, Kotlin.js

After Setup, we can start to know how to write kotlin-js code.

Actually, the document you need is here, but I will talk about something more in this document, and why kotlin.js is better than typescript.

Compile

When kotlin code compiles to js, the type checking in function parameter is lost, just like typescript.

Type checking in function

1
2
3
fun hello(a: String) {

}

Kotlin code above will compile to js below

1
2
3
function hello(a) {
process[a];
}

When you call hello() function, you can not call hello with an integer, but after being compiled to js, you can do this, like below:

1
2
3
4
5
6
function hello(a) {
process[a];
}
// All code below is OK in js.
hello(1)
hello({})

While, the type is not lost(Why kotlin is greater than typescript)

Classes in kotlin will remain, and they will be used in some kotlin grammer, especially in serilization libs. So Don't use simple objects instead of class object, it's different from typescipt.

Example

Code may explain better:

You are Given a class A with a field a

1
2
3
4
5
6
7
8
9
10
interface A {
val a: String
}

class B(override val a: String): A

fun helloA(a: A) {
println(a)
println(a::class)
}

When you compile it to js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function A() {
}
A.$metadata$ = {
kind: Kind_INTERFACE,
simpleName: 'A',
interfaces: []
};
function helloA(a) {
println(a);
println(Kotlin.getKClassFromExpression(a));
}

// And class B:
function B(a) {
this.a_175lx$_0 = a;
}
Object.defineProperty(B.prototype, 'a', {
get: function () {
return this.a_175lx$_0;
}
});
B.$metadata$ = {
kind: Kind_CLASS,
simpleName: 'B',
interfaces: [A]
};

// Quite familar right? We can always write code below in typescript.
// But You'll get into trouble when you use this in kotlin-js!
// This will output 'class Any' for `::class call` call.
hello({a: ""})

// The prefered way is to use class B:
hello(new B(""))

When typescript compiled to js, all the types are erased.

But in kotlin, it’s not.

Error handling:

You can not catch the specified errors in typescript(What a shame!) and js. but you can do it in kotlin.

You can write multi Error catching blocks.

Example:

1
2
3
4
5
6
7
try {
yourFunc()
} catch(e: Exception) {
console.log(e);
} catch(e: Throwable) {
console.log(e);
}

Kotlin common Code below will be compiled to js code:

1
2
3
4
5
6
7
8
9
10
11
12
try {
yourFunc();
} catch (e) {
if (Kotlin.isType(e, Exception)) {
console.log(e);
}
else if (Kotlin.isType(e, Throwable)) {
console.log(e);
}
} else
throw e;
}

If you want to catch js error in kotlin:

Try code below

1
2
3
try { ... } catch(e: dynamic) {
// handle this error
}

Coroutine

The coroutines in js are just the same as kotlin-common. While you can not call suspend function in js.

So you can transfer api to typical promise call:

1
2
3
4
5
6
7
suspend fun hello() {
delay(1000)
}

fun helloApi() = promise {
hello()
}

For more information, see here to get further explain for kotlin Coroutine.