Getting Typescript imports for JSAPI to work?

[Arne_Gelfert]

Been wanting to get my feet wet with Typescript to start working on custom widgets and learning some React. So I've followed the example here, which worked like a charm.

The Typescript code includes the new kind of imports, which I imagine any Pythonista will prefer of the traditional require syntax in Javascript.

import Map = require("esri/Map");
import MapView = require("esri/views/MapView");‍‍‍‍

But I really wanted to get it to work like this, which would look even more like Python:

import Map from "esri/Map";
import MapView from "esri/views/MapView";
‍‍

When I try that, the code still compiles successfully. But I get these intellisense warnings about  default exports...

 

Since I'm new to Typescript, I will have to read up on this import/export business. In the meantime, is this an innocuous warning?

Based on this thread, I should be trying the following:

import * as Map from "esri/Map";
import * as MapView from "esri/views/MapView";‍‍

But that blows up completely...

app/main.ts:10:13 - error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.

10 const map = new Map({
               ~~~~~~~~~
11   basemap: "streets"
   ~~~~~~~~~~~~~~~~~~~~
12 });
   ~~

  app/main.ts:7:1
    7 import * as Map from "esri/Map";
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Type originates at this import. A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Consider using a default import or import require here instead.
‍‍‍‍‍‍‍‍‍‍‍‍‍

This source suggests this setting in tsconfig.json

"allowSyntheticDefaultImports": true

When I try that, Dev Tools scream at me:

Another tweak I tried came from here and looked like this:

"maintainModuleNames" : true.

But that didn't compile so well...

tsconfig.json:13:7 - error TS5023: Unknown compiler option 'maintainModuleNames'.‍‍

Long story short, if anything here screams rookie mistake, please comment. Would love to get these beautiful imports to work. 

[ReneRubalcava]

Set esModuleInterop to true in your tsconfig. You can see a sample here. nearby-javascript/tsconfig.json at master · Esri/nearby-javascript · GitHub 

[Arne_Gelfert]

Rene, this is the tsconfig I was using. I believe it's straight from the sample I was referencing with the exception of the 2 inserts I tried that are commented out.

{  

  "compilerOptions": {

            "module": "amd",

            "target": "es6",

            "esModuleInterop": true,

            "noImplicitAny": true,

            "sourceMap": true,

            "jsx": "react",

            "jsxFactory": "tsx",

            //"allowSyntheticDefaultImports": true, //added this based on https://github.com/Esri/jsapi-resources/issues/37

            //"maintainModuleNames" : true, //added this based on https://github.com/Esri/esri-system-js/pull/10

            "experimentalDecorators": true,

            "preserveConstEnums": true,

            "suppressImplicitAnyIndexErrors": true

            },

   "include": [

            "./app/*"

            ]            ,

   "exclude": [

            "node_modules"

            ]

 }

BTW, I enjoyed a number of your sessions at the Dev Summit... definitely some of the "impetus" behind my resolve to look at Typescript and React. But as I've said elsewhere on this forum, you did make my head explode a few times - haha.

[Arne_Gelfert]

Okay, I think the problem may be solved. I carelessly didn't update my html according to the sample file on Rene's page here. There is a bit of dojoese in there the lack of which likely caused the above shown dojo related errors.

Got my imports working...