在 Typescript 中扩展 Jquery答案

【问题标题】：Extend Jquery in Typescript在 Typescript 中扩展 Jquery
【发布时间】：2019-08-20 03:12:03
【问题描述】：

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

但问题是当我加载那个 HTML 页面时，我得到一个错误：“$(...).createCentralHeader is not a function”。

这是我的 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>

这是我的 main.ts 文件：

import * as $ from "jquery";

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

这是我的 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!!"
});

这里出了什么问题？

【问题讨论】：

标签： javascript jquery typescript definitelytyped

【解决方案1】：

你应该添加到 angular.json

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

jquery 在 main.ts 文件中用下一个代码扩展

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

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

【讨论】：

我不能这样做，因为我的调用是从 html 页面中的
我从小提琴中添加了示例
在您的示例中，您从打字稿文件调用 createCentralHeader()。我想从 HTML 文件中的
你说得对，扩展浏览器版本的 Jquery 有点棘手，但现在调整版本应该可以工作了
另外请记住，在 TypeScript jquery 模块中导入它与浏览器版本的 jquery 不同