时间戳

首页 > 解决方案 > 导入模块时找不到ts文件中的函数

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

问题描述

我尝试开发 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"
}

我试图找出这种行为的原因，但经过 2 小时的研究，我无法找到可行的解决方案。

标签： javascripttypescriptazure-devops-extensions

解决方案

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

参考：模块 - TypeScript

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

推荐阅读