无法将 js 文件导入 component.ts

Question

您好，我开发了一个 angular 12 应用程序。 我在 angular 9 上将 js 导入到上一个应用程序中的每个组件，如下所示：

js文件：

var mainHandler = {
  init: function(){
    this.responsiveHandler();
  },


  responsiveHandler: function() {
    var self = this;

    // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
    let vh = window.innerHeight * 0.01;
    // Then we set the value in the --vh custom property to the root of the document
    document.documentElement.style.setProperty('--vh', `${vh}px`);

    window.addEventListener('resize', () => {
      // We execute the same script as before
      let vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    });

    $('.btn--toggle-menu').unbind('click').bind('click', function(e){

      /* Toggle Button */
      $(this).add('.header--main').toggleClass('opened');

      /* Toggle Main menu */
      if( !$('.header--main').hasClass('opened') ){
        closeMenu();
      } else {
        openMenu();
      }
    });

    // Close menu on item click / Lang select
    $(document).on('click', '.nav--main li a, .megamenu strong, .megamenu a', function(){
        //e.preventDefault();
                $(this).add('.header--main').removeClass('opened');
                closeMenu();
      });

    $(document).on('click touchstart', 'body', function(e){
      if( $('.header--main').hasClass('opened') && !$(e.target).is('.btn--toggle-menu') && $('.btn--toggle-menu').has(e.target).length === 0 && !$(e.target).is('.megamenu') && $('.megamenu').has(e.target).length === 0 ){
        $(this).add('.header--main').removeClass('opened');
        closeMenu();
      }
    });



    var $viewportWidth = window.innerWidth || document.documentElement.clientWidth;

    // On resize events, recalculate and log
    window.addEventListener('resize', function () {

      $viewportWidth = window.innerWidth || document.documentElement.clientWidth;

      if(window.innerWidth >= 1024){
        $('.btn--toggle-menu, .header--main').removeClass('opened');
      }
    }, false);

    function openMenu(){
      /* $('body').css({
        'overflow': 'hidden'
      });
      stopBodyScrolling(true); */
    }
    function closeMenu(){
      /* $('body').css({
        'overflow': ''
      });
      stopBodyScrolling(false); */
    }

    var freezeVp = function(e) {
      e.preventDefault();
    };

    function stopBodyScrolling (bool) {
      if (bool === true) {
        document.addEventListener("touchmove", freezeVp, {passive: false});

      } else {
        document.removeEventListener("touchmove", freezeVp, {passive: false});
      }
    }
  },

  closeMenu: function() {
    $('.header--main').removeClass('opened');
    $('body').css({
      'overflow': ''
    });
  }

};
module.exports = mainHandler;

component.ts 文件：

import * as script from 'src/.../file.js';

ngOnInit() {
  script.init()
}

它工作得很好，但在 angular 12 应用程序中它不再存在并返回此错误：

找不到模块“src/assets/js/file.js”的声明文件。 'c:/Users/.../src/assets/js/file.js' 隐式具有 'any' 类型。

Answer 1

我终于找到了一个解决方案，也许这不是最好的方法，但它有效。 只需添加：

"noImplicitAny": false,

到 tsconfig.json 中的 compilerOptions。 定义常量时可能会出现新的错误，但只是将其作为 any 定义。