Compiling Typescript to JS.... "default" inserts are tripping me up.

Arne_Gelfert — Sun, 12 Dec 2021 02:51:59 GMT

Forking this from another thread because I ran into Typescript issues...

What's been tripping me up has been using Typescript for my latest web development explorations.

When I write the following line in Typescript...

 let params = urlUtils.urlToObject(document.location.href);‍‍

...it compiles to this in Javascript...

let params = urlUtils_1.default.urlToObject(document.location.href);‍‍

and inserts a "default". Apparently, the browser doesn't care about the "_1" (underscore1). I've read a little about it and it seems to be innocuous. But it never assigns the URL info to params. If I tweak my compiled Javascript and remove the extra "default", it runs fine.

In the Dev Tools console, I see (background for what I was doing are in the above reference thread.)

>query.where
<{__accessor__: b}
>query.where
<"LOCNO = '12345'>‍‍‍‍‍‍‍‍‍‍‍‍

So how can I get my Typescript to not mess up the Javascript? Something I need to tweak in my tsconfig.json?

This is what mine looks like:

{
    "compilerOptions": {
      "module": "amd",
      "target": "es6",
      "esModuleInterop": true,

      "noImplicitAny": true,
      "sourceMap": false, 
      "jsx": "react",
      "jsxFactory": "tsx",

      //"allowSyntheticDefaultImports": true, 
      //"maintainModuleNames" : true, 

      "experimentalDecorators": true,
      "preserveConstEnums": true,
      "suppressImplicitAnyIndexErrors": true
    },
    "include": [
      "./app/*"
    ],
    "exclude": [
      "node_modules"
    ]
  }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Compiling Typescript to JS.... "default" inserts are tripping me up.

Arne_Gelfert — Thu, 11 Apr 2019 19:17:41 GMT

Okay. Here is what worked for me. It doesn't make complete sense to me but it solved my problem.

Typescript compiler options are explained here. For -- esModuleInterOp

So the defaults is

false.

In my tsconfig this was true. So I changed it to false and tried with both

"target" : "es5", and then
"target" : "es6"

Both result in: Uncaught TypeError: Map_1.default is not a constructor
.

Next, I compared --esModuleInterop: false using either "es5" or "es6". Here, I get no errors but my code is ignored as before.

Finally, I came across this thread saying there are no default exports included for arcgis-js-api typings.

Aha, so I switched my lovely imports from:

import Map from "esri/Map";

back to:

import Map = require( "esri/Map");

Problem solved. (Although I'm back to requires.)

This suggestion ("workaround") sounded promising but didn't work for me. I think it must reference an earlier version of the API. Or maybe I misunderstood? Maybe a typo?

import arcgisUtils from 'esri/arcgis/utils';

I'm still somewhat confused by the whole export process and targeting different JS flavors. But I guess that's just the state of things right now.

topic Re: Compiling Typescript to JS.... "default" inserts are tripping me up. in ArcGIS JavaScript Maps SDK Questions

Compiling Typescript to JS.... "default" inserts are tripping me up.

Re: Compiling Typescript to JS.... "default" inserts are tripping me up.