导入模块时无法找到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关键字即可。

参考：模块 - TypeScript

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-04-19 21:34:49

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-04-19 21:34:49

解决方案1
0 已采纳 2019-04-19 21:34:49