Esri / jsapi-resources

A collection of resources for developers using the ArcGIS Maps SDK for JavaScript.

Home Page:https://developers.arcgis.com/javascript/latest/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

More docs on using types for 3.x and 4.x?

jwasilgeo opened this issue · comments

Can someone explain to me (or just set me straight) why the typings for JSAPI 3.x aren't using a namespace?

For example, I see in the 4.x typings that it does explicitly list the __esri namespace.

This question stems from an issue conversation over in
angular2-esri-loader, where I am working with JSAPI 3.19 for an Angular2+TypeScript2 demo app. I installed the types with npm install @types/arcgis-js-api@3.19.0, but my VSCode claims it doesn't know anything about the __esri namespace. I poked around and only found "__esri" in the 4.x typings.

Is there something else I need to do (in addition to making sure arcgis-js-api typings are/n't excluded in my project's tsconfig.json)?

Does the 3.x arcgis-js-api.d.ts file need to have this namespace declaration, too?

Thanks!

The 3.x typings have the interfaces in the esri module. This way the global namespace isn't polluted and you can call it whatever you'd like. See:
https://github.com/Esri/jsapi-resources/blob/master/3.x/typescript/demo/MapController.ts#L3
https://github.com/Esri/jsapi-resources/blob/master/3.x/typescript/demo/MapController.ts#L19

@dasa thank you for pointing that out.

With @tomwayson's angular2-esri-loader I suppose we are trying to avoid having to rely on the import xyz = require(...); syntax since the angular2-esri-loader is already imported and used as the mechanism for loading specific JSAPI modules. With some additional experimenting, we've found that TS2 + Webpack within an Angular2 app also starts to do some complaining with 3.x when we tried out the style you pointed out above.

Even though there would be global namespace pollution, is there any possibility in having something similar to the 4.x types' __esri namespace being added to 3.20+? Thanks!

Have you tried only using the syntax for this one line? There's only interfaces in the "esri" module so this isn't in the JS code.

import esri = require("esri");

You may also be able to use import from syntax to access these interfaces like this:

import * as esri from "esri";

Yes, trying either of those lines allows for type support, but only "1 level deep". For example, I can begin typing out esri.Map to only get VSCode code completion that includes options such as MapOptions, MapImageOptions, etc.

VSCode will indicate to me that "[ts] Namespace '"esri"' has no exported member 'Map'."

Right, "esri" mostly just has the constructor options. To get the typing for the "esri/map" module, you still have to import it.

@jwasilgeo - let me know if you have any more questions on this.