在 Angular 2 中使用 vss-web-extension-sdk

Question

我正在尝试使用 Angular 2 和 Typescript 编写 Visual Studio 团队服务扩展，但我失败了（我是 Javascript、Typescript 和 Angular 的相对菜鸟，所以...）

我走了好几条路，但都没有奏效。在为这个包运行各种建议的设置之后（例如 tsd install [big long list of dependencies]，然后是 tsd 链接），在失败后，尝试用 npm install 替换它们......这一切都归结为事实当我尝试在我的代码中引用它时，它不知道“VSS”是什么。

我尝试从“vss-web-extension-sdk”导入 {vss}，但它说找不到名为“vss-web-extension-sdk”的模块。

我尝试从 'vss-web-extension-sdk' 导入 * as VSS，同样的问题。

好吧，我说，显然这实际上不是 TS 告诉我的模块，所以我尝试了“VSS”和“VSS/VSS”（发现挖掘 vss.d.ts 文件）。

我进入 node_modules，它肯定在那里，但我显然不知道如何让 TS 认识到它是一个东西。

我知道问题在于我不了解幕后发生的事情。那里有任何 Angular 机制可以告诉我我做错了什么，并可能教育这个可怜的菜鸟了解我没有掌握的引擎盖下到底发生了什么？

编辑：我想应该可能包含一些代码。

在 app.component.ts 中尝试导入

import { VSS } from 'vss-web-extension-sdk';

我在 package.json 中的依赖项

  "dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@angular/upgrade": "~2.2.0",
    "angular-in-memory-web-api": "~0.1.15",
    "core-js": "^2.4.1",
    "jquery": "^3.1.1",
    "knockout": "^3.4.1",
    "q": "^1.4.1",
    "react": "^15.4.0",
    "reflect-metadata": "^0.1.8",
    "require": "^2.4.20",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "vss-web-extension-sdk": "^1.108.0",
    "zone.js": "^0.6.25"
  },

Answer 1

参考以下步骤：

1. 创建typings.json

代码：

{
  "globalDependencies": {
    "jquery": "registry:dt/jquery#1.10.0+20160929162922",
    "knockout": "registry:dt/knockout#0.0.0+20160914182733", 
    "q": "registry:dt/q#0.0.0+20161004185634",
    "require": "registry:dt/require#2.1.20+20160919185614",
    "tfs": "npm:vss-web-extension-sdk/typings/tfs.d.ts",
    "vss": "npm:vss-web-extension-sdk/typings/vss.d.ts"
  }
}

1. 运行 typings install 命令安装必要的包（在 typings 文件夹中）
2. 打开您的打字稿文件并参考（例如 /// ）

例如：

/// <reference path="../typings/index.d.ts" />
import Controls = require("VSS/Controls");
import VSS_Service = require("VSS/Service");
import TFS_Build_Contracts = require("TFS/Build/Contracts");
import TFS_Build_Extension_Contracts = require("TFS/Build/ExtensionContracts");

4. 创建 tsconfig.json

代码：

{
  "compilerOptions": {
    "module": "amd",
    "target": "ES5",
    "outDir": "dist/",
    "rootDir": "enhancer/",
    "moduleResolution": "node"
  },
  "files": [
    "[your ts file]"
   ]
} 

5. 运行 tsc 命令

您可以检查这些文件中的模块（例如 VSS/Controls） vss-web-extension-sdk\typings\vss.d.ts、tfs.d.ts、rmo.d.ts。

关于tsc编译器的工作流程，可以参考this文章。