topic Re: TypeScript error when creating Search Widget (JS 4.8) in ArcGIS JavaScript Maps SDK Questions

TypeScript error when creating Search Widget (JS 4.8)

PhilLarkin1 — Sat, 11 Dec 2021 14:04:02 GMT

I'm getting an error when assigning a source to a searchWidget. It appears I might be using incorrect syntax for TypeScript.

(TS) Type '{ locator: Locator; name: string; placeholder: string; }[]' is not assignable to type 'Collection<FeatureLayerSource | LocatorSource>'. Property 'add' is missing in type '{ locator: Locator; name: string; placeholder: string; }[]'.‍‍

import Locator = require("esri/tasks/Locator");
import Search = require("esri/widgets/Search");

var sources = [{
    locator: new Locator({ url: "https://gis.spokanecounty.org/arcgis/rest/services/Locators/AddrComposite/GeocodeServer" }),
    name: "addrComposite",
    placeholder: "Search Addresses"
}];

var searchWidget = new Search({
    view: view,
    includeDefaultSources: false
});

searchWidget.sources = sources;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Similar issue here: typescript files error on search widget

Definition file used: Small updates for version 4.8 (#27426) · DefinitelyTyped/DefinitelyTyped@0575e7d · GitHub

Re: TypeScript error when creating Search Widget (JS 4.8)

MattDriscoll — Sat, 11 Dec 2021 14:04:05 GMT

Hey Phil,

I believe it is because it is expecting a collection of a certain type and can't autocast the collection properly. Can you try just pushing to the existing sources since it should be empty on initialize?

import Locator = require("esri/tasks/Locator");
import Search = require("esri/widgets/Search");


var searchWidget = new Search({
    view: view,
    includeDefaultSources: false
});

searchWidget.sources.addMany([{
    locator: new Locator({ url: "https://gis.spokanecounty.org/arcgis/rest/services/Locators/AddrComposite/GeocodeServer" }),
    name: "addrComposite",
    placeholder: "Search Addresses"
}]);‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I'll talk to some colleagues and see if we can fix this.

-Matt

Re: TypeScript error when creating Search Widget (JS 4.8)

PhilLarkin1 — Thu, 30 Aug 2018 18:11:20 GMT

Hi Matt Driscoll‌

Thanks for taking the time to respond. Looks like the collection is still not cast properly. I have attached the full error to my main post.

TS2345 (TS) Argument of type '{ locator: Locator; name: string; placeholder: string; }[]' is not assignable to parameter of type 'Collection<FeatureLayerSource | LocatorSource> | (FeatureLayerSource | LocatorSource)[]'.

...

Re: TypeScript error when creating Search Widget (JS 4.8)

MattDriscoll — Sat, 11 Dec 2021 14:04:08 GMT

Hey Phil, can you try this as a workaround for now?

const searchWidget = new Search({
            view: view,
            includeDefaultSources: false
          });

          const sources = [
            {
              locator: new Locator({
                url:
                  "https://gis.spokanecounty.org/arcgis/rest/services/Locators/AddrComposite/GeocodeServer"
              }),
              name: "addrComposite",
              placeholder: "Search Addresses"
            }
          ];

          type SearchSource = __esri.LocatorSource | __esri.FeatureLayerSource;

          searchWidget.sources.addMany(sources as SearchSource[]);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: TypeScript error when creating Search Widget (JS 4.8)

PhilLarkin1 — Thu, 30 Aug 2018 18:47:08 GMT

That works.

I can't get results with a 10.3.1 server, but can with ESRI's World Geocoder (10.6.1). This is a different issue, though. (https://community.esri.com/thread/220696-search-widget-sends-incorrect-query-string-48-js-api )

Thanks for your help.

Re: TypeScript error when creating Search Widget (JS 4.8)

PhilLarkin1 — Sat, 11 Dec 2021 14:04:11 GMT

This now works as advertised at 4.9.

import Search = require("esri/widgets/Search");
import Locator = require("esri/tasks/Locator");

var sources = [{
    locator: new Locator({ url: "https://<url>/AddrComposite/GeocodeServer" }),
    name: "AddrComposite",
    placeholder: "search addresses",
    singleLineFieldName: "SingleLine",
}];

var searchWidget = new Search({
    view: view,
    includeDefaultSources: false,
    suggestionsEnabled: true,
    sources:sources
});

var searchExpand = new Expand({
    view: view,
    content: searchWidget
})

view.ui.add([
    {
        component: searchExpand,
        position: "top-left",
        index: 1
    }
]);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍