Question

我尝试开发VSTS（Azure Devops）扩展，但不了解以下行为。

我有一个带有按钮元素和onclick侦听器的html页面，例如：

<!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"
}

我试图找到这种现象的原因，但是经过2h的研究后，我无法找到可行的解决方案。

Answer 1

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

参考：Modules - TypeScript

在TypeScript中，就像在ECMAScript 2015中一样，任何包含顶级导入或导出的文件都被视为模块。相反，没有任何顶级导入或导出声明的文件将被视为脚本，其内容可在全局范围内使用（因此也可用于模块）。

导入模块时，无法在ts文件中找到功能

1 个答案: