SPFX - Pnp.sp.search. Simple HelloWorld will not build

[Mike Jansen]

I created te default HelloWorld app with React.

Added pnp (npm install sp-pnp-js -- save)

So far so good. Gulp serve and the app runs fine.

Now I want to add a search so I changed the HelloWorld.tsx like this:

import * as pnp from 'sp-pnp-js';
import { SearchQuery } from 'sp-pnp-js';
import { SearchResults } from 'sp-pnp-js';

.....
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {

  private GetSearchresults(): void {
    pnp.sp.search(<SearchQuery>{
      Querytext: "ContentType:TEST_matters",
      RowLimit: 10,
    }).then((result: SearchResults) => {
   
        var props = result.PrimarySearchResults;
   
});
  
}
  public render(): React.ReactElement<IHelloWorldProps> {
    return (
	Do something
);
  }
....

Now I get some errors on "<SearchQuery>" 

What can be wrong here? Is it something with my imports?

[#2 · Accepted solution]

Used a different syntax which is working:

private GetSearchresults(): void {
    pnp.sp.search({
      Querytext: "ContentType:TEST_matters",
      RowLimit: 5
    }).then((result: SearchResults) => {
      var props = result.PrimarySearchResults;
});

Still do not understand why the first one does not build because is does in a non-react example.