导入模块时找不到ts文件中的函数

Question

我尝试开发 VSTS (Azure Devops) 扩展，但不理解以下行为。

我有一个 html 页面，其中包含一个按钮元素和一个 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 小时的研究后，我无法找到可行的解决方案。

Answer 1

如果没有 import 语句，您的 ts 文件的内容将被视为在全局范围内可用。当您添加导入时，该文件开始被视为一个模块，因此您必须导出您的函数才能使其在文件外部可见。只需在函数前添加 export 关键字。

参考：Modules - TypeScript

In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module. Conversely, a file without any top-level import or export declarations is treated as a script whose contents are available in the global scope (and therefore to modules as well).

导入模块时找不到ts文件中的函数

Function in ts file cannot be found when module is imported

javascript

typescript

azure-devops-extensions