Блог

Главная - Вопросы по программированию - Функция в файле ts не может быть найдена при импорте модуля

Функция в файле ts не может быть найдена при импорте модуля

#javascript #typescript #azure-devops-extensions

#javascript #typescript #azure-devops-extensions

Вопрос:

Я пытаюсь разработать расширение VSTS (Azure Devops) и не понимаю следующего поведения.

У меня есть html-страница с элементом button и прослушивателем onclick, например:

 <!DOCTYPE html>

<head>
    <script type="text/javascript">

        VSS.init({
            usePlatformScripts: true,
            moduleLoaderConfig: {
                paths: { "scripts": "scripts" }
            }
        });

        VSS.ready(function () { require(["scripts/btn-controller"], function () { }); });

    </script>
</head>

<body>
    <button class="active" onclick="btnEvent(event, 'Action')">Button</button>
    <input type="text" id="text">
</body>

</html>

Файл btn-controller.ts:

 function btnEvent(evt, NavTabButton) {
   document.getElementById("text").innerHTML = "works"
}

Это работает нормально, но когда я импортирую модуль в файл ts, я получаю сообщение об ошибке, что функция «btnEvent» не может быть найдена.

 import Extension_Data = require("VSS/SDK/Services/ExtensionData");

function btnEvent(evt, NavTabButton) {
    document.getElementById("text").innerHTML = "should work"
}

Я пытался найти причину такого поведения, но после 2-часового исследования я не смог найти рабочее решение.

Ответ №1:

Без инструкции import содержимое вашего ts-файла рассматривается как доступное в глобальной области. Когда вы добавляете импорт, файл начинает обрабатываться как модуль, поэтому вам нужно экспортировать свою функцию, чтобы она была видна за пределами файла. Просто добавьте export ключевое слово перед вашей функцией.

Ссылка: Модули — TypeScript

В TypeScript, как и в ECMAScript 2015, любой файл, содержащий импорт или экспорт верхнего уровня, считается модулем. И наоборот, файл без каких-либо объявлений импорта или экспорта верхнего уровня обрабатывается как скрипт, содержимое которого доступно в глобальной области видимости (и, следовательно, также для модулей).

Комментарии:

1. Я попытался добавить ключевое слово export перед функцией, но все равно получаю ту же ошибку. Если мне нужно импортировать мой модуль другим способом в HTML-файл?

2. Честно говоря, я не знаком с тем, как вы загружаете этот файл в HTML ( require функция). Но если бы я мог догадаться, не нужно ли вам присвоить возвращаемое значение require вызова некоторой переменной, которая будет представлять загруженный модуль, и ссылаться на члены модуля через эту переменную? К btnEvent функции нельзя получить доступ без какого-либо префикса / квалификатора, потому что она действительно не существует ни в глобальной, ни в локальной области, она находится в модуле.

Метки: