Visual Studio 2017: js file causes many typescript errors

Question

Please see the edit below

I have used the following package as a base for my VS Project -> https://github.com/AngularClass/angular2-webpack-starter

Everything worked nicely in Visual Studio code, I then tried to convert it to a Visual Studio 2017 Project (node.js web)

Now some problems appeared

VS seems to install TypeScript definitions into a special folder C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\@types

Additionally I included @types/node in my package.json which resulted in the appropriate node_modules folder.

now VS complains with error code TS4090 (Conflicting defintions for 'node').

Is there a possibility apart from deleting the folder in \AppData to tell VS which @types it should use?

The whole integration of TypeScript isn't really clear to me... Does MSBuild recognize an existing tsconfig.json? or would I have to configure it in in the project-file as seen here?

EDIT

I just noticed that I was actually editing a .js file. As soon as I changed the extension to .ts every warning and error vanished. I also got many typescript errors (like TS2307, can't find module '@angular/core') before changing the extension from .js to .ts

The file just did an import (from node)

import * as fs from 'fs';

Could anyone explain why I got this errors? Why a JS files causes 200+ typescript errors (some don't even seem related to the import from above)?

EDIT2 the errors which occur are

• TS2403 - Subsequent Variable declarations must have the same type.
• TS2300 - Duplicate identifier 'PropertyKey'
• TS4090 - Conflicting definitions for 'node' found (paraphrasing: found in ./node_modules and C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\@types

All the errors are caused by d.ts files in C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\@types or C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\Common7\IDE\CommonExtensions\Microsoft\TypeScript\lib.es6.d.ts

like Bowden Kelly noted, this seems the cause for this problems seems to be the definition files MS put in here C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\@types, as soon as I install my own definition files in ./node_modules VS finds both definitions (if present) when editing JS files. So the solution would either be:

• doing it the MS Way
• somehow exclude MS Directory

Answer 1

This is a BUG related in https://github.com/Microsoft/TypeScript/issues/14565

I was able to eliminate the errors by enabling

Answer 2

For JavaScript, try to uncheck/disable the "new JavaScript language service" under Tools > Options > Text Editor > JavaScript/TypeScript > Language Service. This seemed to help me when I opened random JavaScript files and the error window would go crazy.

Regarding the Angular 2 errors (cannot find module @angular/core), if there is a tsconfig.json in the project directory both Visual Studio and the TS compiler will use that. If you close an reopen the solution everything on the TypeScript tab of project properties should be disabled.

Once you know tsconfig.json is working, if you are using TS 2.x the compiler should find and use the types that come with angular 2 under node_modules/@angular/core/index.d.ts, unless you have a setting in tsconfig that overrides this like types: [].

I have still not been able to figure out 100% what is going on in Visual Studio Errors window since I still get sporadic unjustified errors (I know this because I can still compile). I do know that the Visual Studio TypeScript Language Service is what controls errors and intellisense in the Visual Studio IDE and it is tied to a specific version of TypeScript (2.1 in VS 2017). The errors have always caused problems in both VS 2015 and now VS 2017 also. I think it comes down to the inner workings of the extremely undocumented TypeScript Virtual Projects, for which I have still not found a purpose.

These links are useful reading:

http://blog.angular-university.io/typescript-2-type-system-how-do-type-definitions-work-in-npm-when-to-use-types-and-why-what-are-compiler-opt-in-types/

http://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types

https://github.com/Microsoft/TypeScript/issues/14540

Answer 3

The definition files installed to C:\Users\MyUser\AppData\Local\Microsoft\TypeScript\node_modules\@types are used for giving JavaScript IntelliSense only. If you have TypeScript in your project or a project configured with a tsconfig.json, you need to fetch your own .d.ts files and store them in your project. Luckily this project comes with all the .d.ts files you need already in the package.json a simple npm install should do the trick.

I can tell you that the conflicting definitions with 'node' are likely due to having 2 copies of the node.d.ts file. If you manually installed one yourself, on top of the one included in the projects package.json, then you'll get those errors.

I'm not certain about the TS errors you are getting in your JavaScript file. Can you show me an example of one of the errors and a snippet of the code causing it?

Also you probably don't want integration with MSBuild as this project is already setup to run with npm scripts + webpack. You should check out this plugin: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner

Finally I don't think you want to be inside a Node.js web project. For this project, you are probably best off just opening the folder in VS. To do that just use File > Open > Folder... and navigate to your root folder. This will give you all the editing tools you need without any MSBuild or VS project structure. Considering this project wasn't designed to take advantage of any of those features, it'll probably be easier just to ignore them for now.

Please let me know what other issues you run into.

Answer 4

FYI, this has been fixed in Visual Studio 17.2 🙂