Question

我正在尝试使用angular 2和Typescript编写视觉工作室团队服务扩展，并且我很难（我将相对Noob归功于Javascript，Typescript和Angular所以...）

我采取了几条路，但没有一条路可行。在为这个软件包运行各种风格的建议设置之后（例如tsd install [很长的依赖列表]，然后是tsd链接），并且在失败之后，尝试用npm install替换它们......这一切都归结为事实当我尝试在我的代码中引用它时，它并不知道＆＃34; VSS＆＃34;是

我尝试从＆＃39; vss-web-extension-sdk＆＃39;进行导入{vss}，但它说它无法找到名为＆＃34; vss-web-extension的模块-sdk＆＃34;

我尝试从＆＃39; vss-web-extension-sdk＆＃39;导入*作为VSS，同样的问题。

好吧，我说，显然实际上并不像TS这样的模块告诉我，所以我尝试了VSS＆＃39;和＆＃39; VSS / VSS＆＃39; （发现通过vss.d.ts文件挖掘）。

我进入了node_modules，它肯定存在，但我显然对于如何让TS认识到这是一件事情一无所知。

我知道问题在于我不明白幕后发生的事情。任何角度机制都可以告诉我我做错了什么，也许可以教育这个可怜的菜鸟在我不能抓住的引擎盖下实际发生的事情？

编辑：应该包括我想的一些代码。

在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

请参阅以下步骤：

创建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"
  }
}

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

例如：

/// <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");

创建tsconfig.json

代码：

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

运行tsc命令

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

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

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

1 个答案: