Community

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

885
1
04-10-2019 09:02 AM
Arne_Gelfert
by
Occasional Contributor III
‎04-10-2019 09:02 AM

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"
    ]
  }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Reply
Arne_Gelfert
by
Occasional Contributor III
‎04-11-2019 12:17 PM

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.

0 Kudos