在 Typescript 中扩展 Jquery

Question

我正在使用 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>

这是我的 main.ts 文件：

import * as $ from "jquery";

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

这是我的中心-header.d.ts :

interface HeaderOptions {
    headerUrl?: string;
}

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

我正在使用 webpack，它使用 ts-loader 转译 TS 并将我的插件捆绑到 cep_HeaderCore.js 中引用的文件 index.html。

这里要注意的另一件事是，如果我从插件中调用 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!!"
});

这里出了什么问题？

Answer 1

您应该添加到 angular.json

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

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

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

或扩展 Windows 接口而不在引号中使用属性

在 Typescript 中扩展 Jquery

Extend Jquery in Typescript

javascript

jquery

typescript

definitelytyped