topic Re: How to use interface types with new ES modules in ArcGIS JavaScript Maps SDK Questions

How to use interface types with new ES modules

RussellMGreen — Thu, 22 Apr 2021 19:11:38 GMT

What is the recommended way to use interfaces when using ES modules (@arcgis/core)?

For example, I have an Angular application that I have loaded:

import GeoJSONLayer from '@arcgis/core/layers/GeoJSONLayer'; import Graphic from '@arcgis/core/Graphic';

How would I gain access to a type like MapViewProperties?

I've tried installing the @types/arcgis-js-api package in addition to @arcgis/core, but that seems like it would be overkill.

Example:

import ImageryLayer from '@arcgis/core/layers/ImageryLayer'; import GeoJSONLayer from '@arcgis/core/layers/GeoJSONLayer'; import Esri = __esri; // <--- used just for interfaces const mapOptions: Esri.MapProperties = {...};

What's the recommended approach?

Thanks!

Re: How to use interface types with new ES modules

ReneRubalcava — Thu, 22 Apr 2021 19:41:50 GMT

The @arcgis/core package already comes with the typings, no need for extra installs. You can continue to use the __esri namespace or alias it in your own d.ts file like this to use it in a short esri namespace.

Re: How to use interface types with new ES modules

JonathanBorgia — Tue, 04 Apr 2023 14:59:00 GMT

Running into the same problem. My angular app complies fine, but then breaks on loading using the
"import esri = __esri" method. @ReneRubalcava I would like to try your suggestion, but the link no longer works.

Re: How to use interface types with new ES modules

ReneRubalcava — Tue, 04 Apr 2023 15:17:34 GMT

The import alias should still work, but might break depending on the tsconfig.

With the latest TypeScript, it's recommended that you utilize type-only imports.

import type FeatureLayer from "@arcgis/core/layers/FeatureLayer"; export function doSomethingWithLayer(layer: FeatureLayer) { // super cool stuff }

If you want to do something like a factory method, where you want to type the properties used for something, you can do something like this.

import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; type LayerFactoryProps = InstanceType<typeof FeatureLayer>; export function layerFactory(props: LayerFactoryProps) { // maybe add some defaults here // create layer const layer = new FeatureLayer(props); return layer; }

Ideally, I would recommend against using the __esri namespace, unless you really need it for things like the Event types, or watch/reactiveUtil handlers. Other than that, you should avoid it.