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

Question

I'm migrating a landing page that only used HTML + CSS + JS to an Angular project.

I have created a component called "landing-page" and added the respective html and styles. My .js I have added to landing-page.component.ts.

The problem is in the .ts because it doesn't recognize a function to make the landing page fully functional.

I am using Renderer2 to be able to add the cdn links of the scripts I am using.

In this part of the code I have some errors

    (function ($) {
      /*------------------
        Navigation
      --------------------*/
      $('.main-menu').slicknav({
        appendTo: '.header-section',
        allowParentLinks: true,
      });
      /*------------------
        Background Set
      --------------------*/
      $('.set-bg').each(function () {
        var bg = $(this).data('setbg');
        console.log(bg); // Verifica si bg contiene la ruta correcta
        $(this).css('background-image', 'url(' + bg + ')');
      });

      /*------------------
        Accordions
      --------------------*/
      $('.panel-link').on('click', function (e) {
        $('.panel-link').removeClass('active');
        var $this = $(this);
        if (!$this.hasClass('active')) {
          $this.addClass('active');
        }
        e.preventDefault();
      });

        /*------------------
              Circle progress
          --------------------*/
      $('.circle-progress').each(function () {
        var cpvalue = $(this).data('cpvalue');
        var cpcolor = $(this).data('cpcolor');
        var cptitle = $(this).data('cptitle');
        var cpid = $(this).data('cpid');

        $(this).append(
          '<div class="' +
            cpid +
            '"></div><div class="progress-info"><h2>' +
            cpvalue +
            '%</h2><p>' +
            cptitle +
            '</p></div>'
        );

        if (cpvalue < 100) {
          $('.' + cpid).circleProgress({
            value: '0.' + cpvalue,
            size: 211,
            thickness: 5,
            fill: cpcolor,
            emptyFill: 'rgba(0, 0, 0, 0)',
          });
        } else {
          $('.' + cpid).circleProgress({
            value: 1,
            size: 211,
            thickness: 5,
            fill: cpcolor,
            emptyFill: 'rgba(0, 0, 0, 0)',
          });
        }
      });
    }

1.- Property 'slicknav' does not exist on type 'JQuery'. 2.- Although $('.set-bg'). does not give any error, it is not working and it is not because of the path of the image that loads since it is the correct one. It seems that the function is simply not executed. 3.- Property 'circleProgress' does not exist on type 'JQuery'.

This is the first time I migrate a simple landing page project to an Angular project, I don't know if this is the right way to do it. Thanks

I added this line:

import * as $ from 'jquery';

To fix errors marked in red.

I also used the types:

@types/jquery

I was hoping to fix the slicknav and circle progress problems but it is still not working.