Расширить Jquery в Typescript - PullRequest
Новая
       18

Расширить Jquery в Typescript

2 голосов
/ 29 марта 2019

Я создаю плагин с использованием 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);
};

Вот мой central-header.d.ts: 

interface HeaderOptions {
    headerUrl?: string;
}

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

Я использую веб-пакет, который использует ts-загрузчик для переноса 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!!"
});

Что здесь не так?

1 Ответ

1 голос
/ 29 марта 2019

Вы должны добавить в angular.json 

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

и jquery будет расширен в файле main.ts с помощью следующего кода 

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

или с расширением интерфейса Windows без использования свойства в кавычках

...