jQuery not recognizing plugins

Question

I am trying to get Trumbowyg, a lightweight WYSIWYG editor, to work with react. The thing it dependent in jQuery. This line

console.log($('#description').trumbowyg());

in the snippet below is throwing the this error

 Property 'trumbowyg' does not exist on type 'JQuery<HTMLElement>'

I am confused because I am able to console log value from that block which means '/trumbowyg.js' is fully loaded as well as jQuery.

useEffect(() => {
    console.log(document.body.childNodes.length)
    loadScriptAsync('/jquery.js', 'jquery')
      .then(function () {
        // console.log('jQuery loaded');
        return loadScriptAsync('/trumbowyg.js', 'trumbowyg');
      })
      .then(function () {
        // console.log('Trumbowyg loaded');
        console.log($('#description').trumbowyg());
        // console.log($('#description').val());
      })
      .catch(function (error) {
        console.error(error.message);
      });

  }, [])

Answer 1

this was entirely typescript issue. I added the line below in my @types/somefile.ds.ts file and it worked.

declare global {
    interface Window {
        $: any;
    }
}

let $ = window.$;