ArcGIS Blog

Mapping

Improved TypeScript development with ArcGIS API for JavaScript

By Undral Batsukh

The TypeScript declaration file for the ArcGIS API for JavaScript contains type information specific for the API. You can learn more about how to install this file from the TypeScript set up guide page or on GitHub.

The version 4.6 introduces several improvements:

  • Added JSDoc definitions for classes, methods and properties: Classes and their members are now decorated with JSDoc comments. An integrated development environment (IDE) like Visual Studio Code, now shows an overview of the documentation while you type your code or when you hover a class, property or a method.
  • typings on property

    The documentation also includes a link to directly open the API reference at the relevant page.

    read more

  • Read-only properties: API’s read-only properties are now marked with the readonly modifier in the declaration file. These properties are also no longer available as constructor parameters.
  • Autocasting for constructor parameters: We enhanced the typings to improve custom autocasting for constructor parameters (most notably named basemaps and symbol colors).
  • const map = new WebMap({
      // autocasts to a Basemap object
      basemap: "topo",
      layers: [
        new FeatureLayer({
          // autocasts to a PopupTemplate object
          popupTemplate: {
            content: "{*}"
          }
        })
      ]
    });
    
    const symbol = new SimpleFillSymbol({
      // autocasts to a Color object
      color: "red",
      // autocasts to a SimpleLineSymbol object
      outline: {
        style: "solid"
      }
    });
    
  • Typing improvement to take advantage of discriminated unions: Geometry, Symbol and Renderer classes now have their type property specified with their values. This lets you use the powerful advanced typing pattern, discriminated union. In addition, a new module esri/geometry lets you import all the geometry classes including a discriminated union Geometry type.
  • import { Geometry } from "esri/geometry";
    
    function logGeometry(geometry: geometry): void {
      // Geometry is a union of all the geometries
      // discriminate on the 'type' property
      if (geometry.type === "point") {
        // new at 4.6, the compiler knows the geometry is a Point instance
        console.log("point coords: ", geometry.x, geometry.y, geometry.z);
      }
      else {
        // the compiler knows the geometry must be a `Extent | Polygon | Multipoint | Polyline`
        console.log("The value is a geometry, but isn't a point.")
      }
    }
    

    We hope these improvements will make you more productive in your application development.

    Share this article

    Subscribe
    Notify of
    0 Comments
    Oldest
    Newest
    Inline Feedbacks
    View all comments