typescript in Graphic constructor

[john_cartwright_noaa]

Hello All,

I'm constructing a Graphic and the geometry type is not recognized by TypeScript, saying

Type '{ type: string; rings: number[][][]; }' is not assignable to type 'GeometryProperties'.
  Object literal may only specify known properties, and 'type' does not exist in type 'GeometryProperties'.ts(2322)
arcgis-js-api.d.ts(7670, 5): The expected type comes from property 'geometry' which is declared here on type 'GraphicProperties'

It looks to me as if the Geometry type definition should allow this. Sample code below:

const hexGraphic = new Graphic({
      geometry: {
        type: 'polygon',
        rings: [[
          [-116.83830158928454, 32.26038282119406],
          [-115.25400548040932, 33.43153649157358],
          [-115.64454936135779, 35.138559675017866],
          [-117.66644115562842, 35.657119683574905],
          [-119.2405536967384, 34.468622114983724],
          [-118.8045281400983, 32.77943799663874],
          [-116.83830158928454, 32.26038282119406]
        ]]
      },
      attributes: {
        h3: '8229a7fffffffff',
        count: 17324
      },
      symbol: simpleFillSymbol,
      popupTemplate: graphicPopupTemplate
    })

[JasonDoingMaps]

Autocasting doesn't cooperate so well with TypeScript. Per:

https://developers.arcgis.com/javascript/latest/programming-patterns/#autocasting

Currently, due to limitations in TypeScript, autocasting works best in non-TypeScript applications.

If you cast your object literals to "any", you'll dodge TypeScript checking and it will compile without errors. You just have to be more certain about the properties you're setting though, because there'll be nothing protecting you from typos, providing unexpected types, etc. Basically, you have to forego the type-checking of TypeScript.

Like this:

const hexGraphic = new Graphic({
      geometry: {
        type: 'polygon',
        rings: [[
          [-116.83830158928454, 32.26038282119406],
          [-115.25400548040932, 33.43153649157358],
          [-115.64454936135779, 35.138559675017866],
          [-117.66644115562842, 35.657119683574905],
          [-119.2405536967384, 34.468622114983724],
          [-118.8045281400983, 32.77943799663874],
          [-116.83830158928454, 32.26038282119406]
        ]]
      } as any,
      attributes: {
        h3: '8229a7fffffffff',
        count: 17324
      } as any,
      symbol: simpleFillSymbol,
      popupTemplate: graphicPopupTemplate
    })

[AndyGup · Accepted solution]

Hi @john_cartwright_noaa like @JasonDoingMaps mentioned, TypeScript limitations cause autocasting to throw errors during the build process. Are you using ESM or AMD modules?

The best practice when you run into TypeScript autocasting errors is to break out individual Classes and properties along with their actual types, this way you can maintain type safety. All API modules are typed, for non-module typings you might need to use the __esri namespace.

Here is an "@arcgis/core" ESM example. For those reading this that aren't aware, the ES modules include the typings with the npm install. In this example the typings are inferred, and I've shortened the sample for brevity:

import Graphic from "@arcgis/core/Graphic";
import Polygon from "@arcgis/core/geometry/Polygon";

    const hexGraphic = new Graphic({
      // Use an instance of Polygon here
      geometry: new Polygon({
        rings: [[
          [-116.83830158928454, 32.26038282119406],
          [-115.25400548040932, 33.43153649157358],
          [-115.64454936135779, 35.138559675017866],
          [-117.66644115562842, 35.657119683574905],
          [-119.2405536967384, 34.468622114983724],
          [-118.8045281400983, 32.77943799663874],
          [-116.83830158928454, 32.26038282119406]
        ]]
      }),
      attributes: {
        h3: '8229a7fffffffff',
        count: 17324
      }
    })