RequireJS 和 TypeScript name.d.ts

Question

我正在尝试加载其余客户端以在自定义 Azure Devops 仪表板小部件中使用。在 Microsoft Documentation 中，它显示了

的打字稿示例

import RestClient = require("TFS/WorkItemTracking/RestClient");

// Get an instance of the client
var client = RestClient.getClient();

// Call a method on the client
// e.g. client.getResource(...).then(...);

加载休息客户端。我试图遵循这个例子，并把我认为应该是一个工作代码示例放在下面。

但是，当页面加载时，出现以下错误，

require.js:1961 GET https://localhost:5500/scripts/node_modules/vss-web-extension-sdk/typings/tfs.d.ts/Dashboards/WidgetHelpers.js net::ERR_ABORTED 404 (Not Found)
require.js:1961 GET https://localhost:5500/scripts/node_modules/vss-web-extension-sdk/typings/tfs.d.ts/WorkItemTracking/RestClient.js net::ERR_ABORTED 404 (Not Found)
require.js:1961 GET https://localhost:5500/scripts/node_modules/vss-web-extension-sdk/typings/tfs.d.ts/WorkItemTracking/Contracts.js net::ERR_ABORTED 404 (Not Found)

出于某种原因，RequireJS 似乎正在尝试为 tfs.d.ts 文件中定义的类型加载 javascript 文件。

我知道可以使用 VSS.require()，但我想尝试使用文档中显示的格式。

有谁知道我遗漏了什么或者我如何更改它以解决使用 RequireJS 加载模块的问题？

编辑

我忘了说，我使用的库叫做 VSS Web Extension SDK。我通过 npm 命令 npm install vss-web-extension-sdk 安装了它。我尝试在这个库中使用 RequireJS 的原因是因为在 README 的 TypeScript 部分，它指向使用 AMD 模块。

所需的代码和配置文件

Test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="node_modules/requirejs/require.js" data-main="scripts/config.js"></script>
    </head>
    <body>
        <div class="widget">
            <h2 class="title"></h2>
        </div>
    </body>
</html>

config.js

requirejs.config({
    paths: {
        "VSS": "node_modules/vss-web-extension-sdk/lib/VSS.SDK.min.js",
        "TFS": "node_modules/vss-web-extension-sdk/typings/tfs.d.ts"
    }
});
require(["HelloWorld"]);

注意：当 "TFS": "node_modules/vss-web-extension-sdk/typings/tfs.d.ts" 行不存在时，会显示以下错误。

require.js:1961 GET https://localhost:5500/scripts/TFS/Dashboards/WidgetHelpers.js net::ERR_ABORTED 404 (Not Found)
require.js:1961 GET https://localhost:5500/scripts/TFS/WorkItemTracking/RestClient.js net::ERR_ABORTED 404 (Not Found)
require.js:1961 GET https://localhost:5500/scripts/TFS/WorkItemTracking/Contracts.js net::ERR_ABORTED 404 (Not Found)

HelloWorld.ts

VSS.init({                        
    explicitNotifyLoaded: true,
    usePlatformStyles: true
});

import WidgetHelpers = require("TFS/Dashboards/WidgetHelpers");
import RestClient = require("TFS/WorkItemTracking/RestClient");
import { QueryExpand } from "TFS/WorkItemTracking/Contracts";

// Get an instance of the client
var client = RestClient.getClient();
WidgetHelpers.IncludeWidgetStyles();

VSS.register("HelloWorldWidget", function () {                
    return {
        load: function (widgetSettings) {
            var $title = $('h2.title');
            $title.text('Hello World');
            console.log(client.getQueries("Projects", QueryExpand.All));

            return WidgetHelpers.WidgetStatusHelper.Success();
        }
    };
});
VSS.notifyLoadSucceeded();

已编译HelloWorld.js

define(["require", "exports", "TFS/Dashboards/WidgetHelpers", "TFS/WorkItemTracking/RestClient", "TFS/WorkItemTracking/Contracts"], function (require, exports, WidgetHelpers, RestClient, Contracts_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    VSS.init({
        explicitNotifyLoaded: true,
        usePlatformStyles: true
    });
    // Get an instance of the client
    var client = RestClient.getClient();
    WidgetHelpers.IncludeWidgetStyles();
    VSS.register("HelloWorldWidget", function () {
        return {
            load: function (widgetSettings) {
                var $title = $('h2.title');
                $title.text('Hello World');
                console.log(client.getQueries("Projects", Contracts_1.QueryExpand.All));
                return WidgetHelpers.WidgetStatusHelper.Success();
            }
        };
    });
    VSS.notifyLoadSucceeded();
});

tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "outDir": "scripts",
        "module": "amd",
        "moduleResolution": "node",
        "types": [
            "vss-web-extension-sdk"
        ]    
    }
}

Answer 1

正如Louis所说，这可以通过使用VSS.require开始一切来完成。

我的代码目前看起来有点像这样。

Widget HTML 文件。

<head>
    <script src="../lib/VSS_Web_Extension/VSS.SDK.min.js"></script>
    <script src="../compiled_ts/WidgetInit.js"></script>
</head>

WidgetInit.js

// Initialize the VSS sdk
VSS.init({
    explicitNotifyLoaded: true,
    usePlatformScripts: true,
    usePlatformStyles: true
});

// Wait for the SDK to be initialized
VSS.ready(function () {
    //All my other code is in Widget.js and runs fine
    VSS.require(["src/compiled_ts/Widget"]);
});

RequireJS 和 TypeScript name.d.ts

RequireJS and TypeScript name.d.ts

javascript

typescript

azure

tfs

requirejs