SharePoint React pnpjs

Question

I am working on a react project for SharePoint framework.
My question is a more or less general question.

I came across a certain problem which I don't understand:
I tried to use sp.search with an object matching the SearchQuery interface, but did this in a class extending react.component

Code:

public search(query: string, properties: Array<string>, rowLimit: number): Promise<SearchResults> {
    return new Promise<SearchResults>(async (resolve) => {
        let result = await sp.search(<SearchQuery>{
            Querytext: query,
            SelectProperties: properties,
            RowLimit: rowLimit
        });
        resolve(result);
    });
}

As you can see, this is just a basic search function. If I use sp.search in a class that does not extend react.component or if I don't use the searchquery instance, but a plain querystring everything works fine.

I seem to be a type error, but honestly, I don't get what's happening.
Error:

[ts]Argument of type 'Element' is not assignable to parameter of type 'SearchQueryInit'. Type 'Element' is not assignable to type 'ISearchQueryBuilder'.
Property 'query' is missing in type 'Element'. [2345]

[ts] JSX element 'SearchQuery' has no corresponding closing tag. [17008]
[ts] 'SearchQuery' only refers to a type, but is being used as a value here. [2693]

So I decided to just write a service that's using pnpjs and that's totally fine, especially since I didn't plan to use pnpjs in a component, that was just to be a bit faster and have something to test and to work with. but nevertheless, I really would like to understand what is going on. Btw I'm using TypeScript, if that's of interest.

Answer 1

Apparently those errors occur due to a limitation cased by the use of <T> for generic type parameter declarations combined with JSX grammar, refer this issue for a more details (which is marked as a Design Limitation )

To circumvent this error, create the instance of SearchQuery :

const searchQuery: SearchQuery = {
    Querytext: query,
    SelectProperties: properties,
    RowLimit: rowLimit
};

and then pass it into sp.search method:

let result = await sp.search(searchQuery);