gpt4 book ai didi

javascript - 在 Typescript 中扩展 Jquery

转载 作者:搜寻专家 更新时间:2023-10-30 21:45:44 26 4
gpt4 key购买 nike

我正在使用 Typescript 创建一个插件,它为 Header 创建一个 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);
};

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

关于javascript - 在 Typescript 中扩展 Jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55413003/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com