Javascript 在Typescript中扩展Jquery_Javascript_Jquery_Typescript_Definitelytyped

Javascript 在Typescript中扩展Jquery

javascript jquery typescript

Javascript 在Typescript中扩展Jquery,javascript,jquery,typescript,definitelytyped,Javascript,Jquery,Typescript,Definitelytyped,我正在使用Typescript创建一个插件，它为标题创建一个DOM，并将其附加到页面上。此项目使用JQuery进行DOM操作。我想从HTML页面向插件传递配置选项。为此，我用我的自定义函数扩展JQuery并在其中传递选项但问题是，当我加载HTML页面时，我得到一个错误：“$（…）.createCentralHeader不是一个函数” 这是我的Index.html文件： <!DOCTYPE html> <html lang="en"> <body class="s

我正在使用Typescript创建一个插件，它为标题创建一个DOM，并将其附加到页面上。此项目使用JQuery进行DOM操作。我想从HTML页面向插件传递配置选项。为此，我用我的自定义函数扩展JQuery并在其中传递选项

但问题是，当我加载HTML页面时，我得到一个错误：“$（…）.createCentralHeader不是一个函数”

这是我的Index.html文件：

<!DOCTYPE html>
<html lang="en">

<body class="siteheader-body">
    <div class="cep-Header"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="./dist/cep_HeaderCore.js"></script>
    <script>
        $('cep-Header').createCentralHeader({
            headerUrl: "Hello World!!"
        });
    </script>
</body>

</html>

这是我的central-header.d.ts：

interface HeaderOptions {
    headerUrl?: string;
}

interface JQuery {
    createCentralHeader(options?: HeaderOptions);
}

我正在使用webpack，它使用ts loader传输ts，并将我的插件捆绑到index.html中引用的文件cep_HeaderCore.js中

这里需要注意的一件更重要的事情是，如果我从插件中调用createCentralHeader，它将按预期工作。例如：

import * as $ from "jquery";

$.fn.createCentralHeader = function(this: JQuery, options?: HeaderOptions) {
    const settings: HeaderOptions = {
        headerUrl: options.headerUrl
    };
    alert(settings.headerUrl);
};

$("cep-Header").createCentralHeader({
    headerUrl: "Hello World!!"
});

这里出了什么问题？

您应该添加到angular.json

"scripts": [
          "node_modules/jquery/dist/jquery.min.js"
        ]

jquery在main.ts文件中进行了扩展，下面是代码

window['$'].fn.test = function (message: string) {
  alert(message);
};

或者在不使用引号中的属性的情况下扩展Windows界面

我无法做到这一点，因为我的调用发生在无法执行类型转换的html页面中。正如我之前所说，它可以从插件中工作，但不能从html中工作。我想从HTML文件内部这样做，你是对的，扩展Jquery的浏览器版本有点棘手，但现在调整版本应该可以工作。请记住，在TypeScript Jquery模块中导入的与Jquery的浏览器版本不同

window['$'].fn.test = function (message: string) {
  alert(message);
};