typescript in Graphic constructor

1044
2
Jump to solution
09-03-2022 01:28 PM
john_cartwright_noaa
New Contributor III

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
    })
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
AndyGup
Esri Regular Contributor

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
      }
    })

 

View solution in original post

0 Kudos
2 Replies
JasonDoingMaps
New Contributor II

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
    })

 

0 Kudos
AndyGup
Esri Regular Contributor

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
      }
    })

 

0 Kudos