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

Question

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" ] }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Arne_Gelfert · Answer

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.