Hi folks, I'm struggling with consuming d.ts defin...

# javascript

[Piotr Krzemiński]

Hi folks, I'm struggling with consuming d.ts definitions generated by jsGenerateExternals from within TypeScript. A minimal example: my d.ts file starts like this

type Nullable<T> = T | null | undefined
export namespace com.example.myproject {
    class CoolDto {
        constructor(isDog: string);
        readonly isDog: string;
        // ...

and in TS I import it like this:

import { com } from '../../sharedModel';

const { CoolDto } = com.example.myproject;
type CoolDto = typeof CoolDto;

and then simply use it this way:

coolDtoInstance.isDog

but IntelliJ and TS compiler are complaining:

Property 'isDog' does not exist on type 'typeof CoolDto'.  TS2339

    73 | 
  > 74 |   const isDog = coolDtoInstance.isDog;
       |                                 ^

The funny thing is that IntelliJ hints to add this field to this d.ts file, but after adding it, it still doesn't work 😕
Any ideas?

[Derek Ellis]

What does the corresponding Kotlin code look like?

[Piotr Krzemiński]

package com.example.myproject

import kotlinx.serialization.Serializable
import kotlin.js.ExperimentalJsExport
import kotlin.js.JsExport

@Serializable
@JsExport
@ExperimentalJsExport
data class CoolDto(
    val isDog: String
)

[Derek Ellis]

You could try annotating isDog with @JsName("isDog")

[Derek Ellis]

You could also check the output JS to see what the compiler is actually generating

[Piotr Krzemiński]

Adding @JsName(...) doesn't change anything 😞 the first code snippet is what the Kotlin compiler generates. I realized it's not really a Kotlin problem (😶), but consuming some d.ts file from TypeScript. If we get this to work, next we can think if Kotlin correctly generates d.ts

[Derek Ellis]

Oh wait, how come you're u sing typeof CoolDto?
You should be able to just use CoolDto as-is

[Piotr Krzemiński]

I thought the same, but then then I'm getting

TS2749: 'CoolDto' refers to a value, but is being used as a type here. Did you mean 'typeof CoolDto'?

I'm getting it when trying to use CoolDto e.g. in such context:

type SomeCoolReactState = {
  coolDtoState: CoolDto | null,
}

[Piotr Krzemiński]

the above happens when I import the class like this:

import { com } from '../../sharedModel';
const { CoolDto } = com.example.myproject;

And when I try a regular import :

import CoolDto = com.example.myproject.CoolDto;

then the TypeScript compiler complains with such message:

`import =` is not supported by @babel/plugin-transform-typescript
Please consider using `import <moduleName> from '<moduleName>';` alongside Typescript's --allowSyntheticDefaultImports option.

From what I checked, it's not possible to use import when namespaces are used 🤔

[Derek Ellis]

Ahhh I see.
You should use the --allowSyntheticDefaultImports option

[Derek Ellis]

Or add "allowSyntheticDefaultImports": true to your tsconfig.json file

[Derek Ellis]

And then just use the import CoolDto = com.example.myproject.CoolDto;

[Piotr Krzemiński]

I already have "allowSyntheticDefaultImports": true, in tsconfig.json

[Piotr Krzemiński]

I'll try with the option

[Piotr Krzemiński]

I think I need to prepare a minimal, buildable project out of this problem 😄 there might be some extra context I'm missing when describing the problem

[Derek Ellis]

I think it should work with that option, that's how I have it set up anyway. But yeah, maybe something's missing, or maybe it's not reading that config? 🤔

[Derek Ellis]

Btw here is a relevant issue in the Typescript repo https://github.com/Microsoft/TypeScript/issues/13135
it might be worth adding a Kotlin use case to the issue

[Piotr Krzemiński]

I know the config is read because if I change the flag to false, the code on the main branch doesn't build.

Anyway, thanks a lot for your help so far! will revisit this topic next week.

[Piotr Krzemiński]

as promised, I prepared a simple project where the issue reproduces: https://github.com/krzema12/kotlin-sharing-model-with-typescript See the README to learn how to use it. In short, just run yarn build and you'll see the issue I'm facing. I'd be really grateful if you could take a look @Derek Ellis

[Derek Ellis]

Ahhhh I see now. I guess create-react-app uses @babel/plugin-transform-typescript which doesn't like the import = syntax. My project is set up using webpack and we don't use babel which I guess is how I've avoided this issue

[Derek Ellis]

I can give it a try later, but the babel docs list a workaround for the problem: https://babeljs.io/docs/en/babel-plugin-transform-typescript.html#caveats

[Derek Ellis]

The babel-plugin-replace-ts-export-assignment plugin

[Piotr Krzemiński]

isn't the plugin about transforming export =? the problematic part is import =

[Piotr Krzemiński]

(I tried the plugin just in case - doesn't work 😄 )

[Derek Ellis]

Oh wait I guess I read that wrong lol

[Derek Ellis]

That's pretty annoying honestly. It'd be nice if they declared the namespaces as a module path instead

that way you could do import { Cat } from "com/github/krzema12/api"

[Derek Ellis]

I guess the only way to use the typescript definitions as-is is to set up a build that uses tsc itself instead of babel

[Derek Ellis]

I wonder if there's a youtrack issue for this

[Piotr Krzemiński]

Yeah, I thought about the same (module path). Maybe I'll use this workaround locally, I'll simply modify the file using build logic + will report it on Youtrack as a bug (something that holds me back from using it)

[Derek Ellis]

There are a couple of relevant youtrack issues:
https://youtrack.jetbrains.com/issue/KT-37883
https://youtrack.jetbrains.com/issue/KT-39426

[Derek Ellis]

I think it'd still be worth noting this particular use case, since I think it could be quite common

[Piotr Krzemiński]

Thanks for your help!

[Piotr Krzemiński]

Also: https://youtrack.jetbrains.com/issue/KT-37710

[Piotr Krzemiński]

I cut a separate ticket under KJS: Typescript definitions unusable with '@babel/plugin-transform-typescript' : KT-47202