Использование vss-web-extension-sdk в Angular 2

Question

Я пытаюсь написать расширение для командных служб Visual Studio, используя Angular 2 и Typescript, и я терплю неудачу (я относительный Noob к Javascript, Typescript и Angular, так что...)

Я выбрал несколько путей, но ни один из них не сработал. После запуска различных вариантов предлагаемой установки для этого пакета (например, tsd install [большой длинный список зависимостей], затем ссылка tsd) и после сбоя попытка заменить их на npm install... все сводится к тому, что что, когда я пытаюсь сослаться на него в своем коде, он не знает, что такое "VSS".

Я попытался выполнить импорт {vss} из 'vss-web-extension-sdk', но он говорит, что не может найти модуль с именем "vss-web-extension-sdk".

Я пытался импортировать * как VSS из 'vss-web-extension-sdk', та же проблема.

Хорошо, я говорю, по-видимому, на самом деле это не тот модуль, о котором говорит TS, поэтому я попробовал "VSS" и "VSS/VSS" (обнаружил, что копался в файле 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

Обратитесь к этим шагам:

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

2. Запустите команду "typings install" для установки необходимого пакета (в папке "typings")
3. Откройте ваш машинописный файл и ссылку (например, ///)

Например:

/// <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 вы можете обратиться к этой статье.