Typescript not recognizing Javascript in VS 2015

Question

I have typescript I am writing in Visual Studio 2015, and I just added 2 new Typescript files. The Typescript files compile to .js files when I build my project/solution. These .js files are visible in the solution explorer when you click to show all files.

My issue is that it appears that Visual Studio does not "recognize" these .js files as the products of their Typescript files. All of my older Typescript still contains the arrow beside it which you can click to show it's compiled "children" (.js, .min.js etc.), but the new Typescript files I just added appear to have no .js counterparts. This is weird in and of itself, but I also suspect it has something to do with my browser throwing an error that it can't find the .js files it's looking for when I debug my code.

Here is an image of what I'm describing. You can see the ViewNetworkLogController.ts here, and it's .js etc. counterparts that have been compiled. You'll notice that they do not form a drop down structure like VideoManagerController.ts does. This is how I am used to .ts files behaving. The ViewNetworkLogController is also not loading in the broser on debugging.

Here is a picture of the properties of the not functional ViewNetworkingLogController.js file:

And here is a picture of the properties of the functional VideoManagerCOntroller.js, notice how the video manager's has the build action field that is not in the view networking log's:

Thanks for any help!

Answer 1

You should stop thinking about your js files as src files and think of them as dist files, similar to compiled assemblies. You really don't want to see js files in your project unless you want to see what the compiled js looks like. And even for that, the typescript playground is pretty good (just ignore the reference errors).

As for debugging, you should be generating .map.js files. This is what the browser will look for to make js back to ts. So breakpoints can be added to ts, and errors will appear in ts.

Hopefully that helps some.

Answer 2

I recommend configuring an outDir to keep those output files in a separate, parallel structure. Then you can include the files in your project and use them in downstream build-steps somehow if you want without muddying your source.

I don't know why your browser can't find the js files only for debugging .