如何让 Visual Studio Typescript 1.7 intellisense 与 nodejs 库（angular2、rxjs）一起使用？

Question

[已解决] 我记录了一个bug against TypeScript 并且该修复应该汇总到下一个 VS 插件版本中。本质上，如果您将模块分辨率指定为“NodeJs”，则可以让智能感知工作。但是编译器不喜欢这样，因为它希望它是“节点”。看起来他们正在做的修复是通过指定“节点”来使一切正常。

---

我正在尝试使用 msbuild 构建一个 Angular2 项目，因为我想使用 ASP.Net Web API 作为我的后端。代码编译并运行良好，但我的编辑器（SublimeText 3 或 Visual Studio 2015）不喜欢我导入 Angular2 库的方式：

boot.ts：

import {bootstrap} from 'angular2/platform/browser';  // error: cannot find module
import {AppComponent} from './app.component';
bootstrap(AppComponent, []);

如果我使用 TypeScript 编译器直接使用 tsconfig.json 和 node lite-server 运行相同的示例 (Angular2 Hero Tutorial)，则 SublimeText3 可以正常工作并且可以很好地识别此语法。但是，一旦我切换到 msbuild，由于某种原因，我会收到这个智能感知错误。以下是我认为相关的其他项目：

文件夹结构：

\
  - index.html
  - package.json
  \app
      - boot.ts
      - app.component.ts
  \node_modules
      \angular2
          \platform
              - browser.js
              - browser.d.ts

package.json:

{
  "name": "angular2-webapi",
  "version": "1.0.0",
  "scripts": {
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "typescript": "^1.7.3" 
  }
}

csproj 文件中的 TypeScript 编译器部分（其中大部分是从 Angular2 Hero tutorial tsconfig 文件中复制的，但其中一些是由 VS 自动设置的）：

<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|AnyCPU'">
  <TypeScriptTarget>ES5</TypeScriptTarget>
  <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
  <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
  <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
  <TypeScriptModuleKind>System</TypeScriptModuleKind>
  <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
  <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
  <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
  <TypeScriptSourceMap>True</TypeScriptSourceMap>
  <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
  <TypeScriptModuleResolution>node</TypeScriptModuleResolution>
  <TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>
</PropertyGroup>          

我还尝试更改引用 Angular2 库的方式，如下所示，因为它与浏览器脚本的实际物理路径匹配，但不幸的是，生成的文件没有将“.js”扩展名添加到生成的依赖项列表中由于某些原因。这意味着浏览器将请求文件“browser”而不是“browser.js”。

这会破坏运行时：

import {bootstrap} from '../node_modules/angular2/platform/browser';

我实际上不确定系统应该如何知道如何解析“angular2/platform/browser”语法，但如果我不使用 msbuild，它似乎可以工作。鉴于这段代码可以正确编译和运行，它似乎也应该在我的编辑器中工作。有人有什么想法吗？

Answer 1

只要项目属性组设置为

<TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution>

有一个变通方法是修改Microsoft.Typescript.targets。 它使编译器工作：

<TypeScriptBuildConfigurations Condition="'$(TypeScriptModuleResolution)' != ''">$(TypeScriptBuildConfigurations) --moduleResolution $(TypeScriptModuleResolution)</TypeScriptBuildConfigurations>

硬编码为

<TypeScriptBuildConfigurations Condition="'$(TypeScriptModuleResolution)' != '' and '$(TypeScriptModuleResolution)' != 'NodeJs'">$(TypeScriptBuildConfigurations) --moduleResolution $(TypeScriptModuleResolution)</TypeScriptBuildConfigurations>
<TypeScriptBuildConfigurations Condition="'$(TypeScriptModuleResolution)' == 'NodeJs'">$(TypeScriptBuildConfigurations) --moduleResolution node</TypeScriptBuildConfigurations>

PS 请务必备份 Microsoft.Typescript.targets

Answer 2

正如@AndrewSorokin 所描述的，这似乎是打字稿工具中的一个错误，但您可以覆盖项目文件中的错误代码，而不是编辑Microsoft.Typescript.targets。将以下行添加到项目文件的末尾：

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <!-- ... -->
  <!-- Set the Module Resolution mode to be NodeJs as required by intellisense -->
  <!-- See http://stackoverflow.com/questions/34939261/how-can-i-get-visual-studio-typescript-1-7-intellisense-to-work-with-nodejs-libr -->
  <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|AnyCPU'">
    <TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|AnyCPU'">
    <TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution>
  </PropertyGroup>
  <!-- ... -->
  <!-- Override the moduleResolution parameter to tsc to overcome a bug in intellisense -->
  <!-- See http://stackoverflow.com/questions/34939261/how-can-i-get-visual-studio-typescript-1-7-intellisense-to-work-with-nodejs-libr -->
  <PropertyGroup>
    <CompileTypeScriptDependsOn>
      SpoofTypeScriptModuleResolution;
      $(CompileTypeScriptDependsOn)
    </CompileTypeScriptDependsOn>
  </PropertyGroup>
  <Target Name="SpoofTypeScriptModuleResolution">
    <PropertyGroup>
      <TypeScriptBuildConfigurations>$(TypeScriptBuildConfigurations.Replace('--moduleResolution NodeJs', '--moduleResolution node'))</TypeScriptBuildConfigurations>
    </PropertyGroup>
    <Message Text="Options: $(TypeScriptBuildConfigurations)" />
  </Target>
</Project>