Typescript - Templating error when adding events

Open Q&A
,
1

I’ve been trying out Algolia autocomplete, to see if it can do what I need it to (essentially, a select input where the user can search a db of thousands of entries). Our project is in Typescript, and when I basically copy the sample code:

autocomplete({
  container: "#autocomplete-thing",
  getSources({ query, setQuery, refresh }) {
    return RestPromise.Create(`/rest/search?name=${query}`, "GET").then(
      (results: TResult[]) => {
        return [
          {
            sourceId: "links",
            getItems() {
              return results;
            },
            templates: {
              item({ item, html }) {
                return html` <div class="aa-ItemContent">
                  <div class="aa-ItemTitle">${item.name}</div>
                  <button
                    class="aa-ItemActionButton"
                    onClick="${(event) => {
                      event.stopPropagation();

                      setQuery(item.name);
                      refresh();
                    }}"
                  >
                    Fill query
                  </button>
                </div>`;
              },
            },
          },
        ];
      }
    );
  },
});

I get the following compilation error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'string'. on the line setQuery(item.name);

My TResult type has the property name and it works in the line:
<div class="aa-ItemTitle">${item.name}</div>

Does anyone have any idea what’s going on or how to fix it? As far as I can see, the documentation doesn’t work when using typescript.