Nest JS file under TS file in Visual Studio

Topics: General
Dec 17, 2013 at 12:03 AM
Is it possible (or could it be added) that the generated .js file is nested under the corresponding .ts file in Visual Studio in the same way that minified .min.js files are nested under their corresponding .js files?
Coordinator
Dec 18, 2013 at 4:29 PM
Earlier versions of TypeScript did have this behavior, and we also treated the .js files as part of the project. We simplified the VS experience to focus on the TypeScript, but you can still approximate the old behavior by clicking the "Show All Files" button in the Solution Explorer. While this won't nest the .js files under the .ts files, it will let you see the .js files that have been output in the directory.
Dec 18, 2013 at 7:49 PM
Ah I see. Yeah I like to have my generated JS files included in the project as they are the end game for me (JS is after all what the browser is consuming) but it can start to look cluttered since every TS file generates 2 additional files. I feel like Typescript is just the means to get to the JS almost like what a T4 template is to C#. Maybe this feeling will evolve in time. Thanks.
Mar 7, 2014 at 4:30 PM
I agree. I want the js and map files nested in the project as well. This also makes things difficult with source control since I also want then added to my repository. When vs doesn't add them as part of the project, i have to do a custom add of the file outside of the ide to make sure they are committed. The T4 argument is a good one here since the edmx files don't hide the generated classes from the solution...the same should be true for Typescript. Even if its auto generated, we still want to see it and version it. Thanks!
Mar 8, 2014 at 8:53 PM
Mar 8, 2014 at 9:04 PM
exactly what i'm using :) Just wish i didn't have to "show all files", include each .js and .map file in the solution, add them to source, and then manually nest them using the nesting extension. It's workable for sure, but an awful lot of steps for functionality that was already in place in the earlier version. Would love for the team to reconsider or perhaps make it a configurable option on how to treat the gen files.
Mar 8, 2014 at 10:22 PM
It used to be in an earlier VS update, but they took it out because of the limitation in the DTE project system. When you deleted a parent node, it wouldn't support keeping the child nodes, nor could you delete nested files.
Apr 3, 2014 at 1:06 PM
Just upgrade... And also shocked to see this feature have gone away.

This also makes other tools complain when you try to reference the js files, as they are not part of the solution.
But maybe the new "Url picker" in Update 2 can make up for that by saying "Hey so you wanted the file "myfile.ts" but I know that referencing that from html makes no sense at all, so ill just put in "myfile.js" instead... But I somehow doubt that... Besides... Update 2 isn't viable for me atm. as it breaks all our ongoing web projects.
Jul 9, 2014 at 10:43 PM
Earlier versions of TypeScript did have this behavior, and we also treated the .js files as part of the project.
@jonturner Why is this not available anymore? Publishing the JS file won't even work since it is not part of the project by default.

It's very easy for a dev to add a new TS file and forget to show hidden files, then include in project, then modify the .csproj to group the 3 files together so it looks pretty.

This is introducing bugs that are not known until we publish our code to the web server! Not good!
Developer
Jul 10, 2014 at 1:10 AM
The issue is that the way VS is designed to work is like so: When an item is added to Solution Explorer for a project under source control the dependent item(s) are also added to source control. If your dependent item is the compilation output then it's going to be locked for writing by source control. So when you simply build your project the TS files will attempt to write to checked in JS files which will cause the build to fail. Alternatively each build would have to check out every single JS file in your tree. I'm not sure I follow how you're checking in the JS and TS and having things work.
Jul 10, 2014 at 4:44 PM
@danquirk In regards to trying to compile files that are checked in and having the compile fail fail because it is locked (TS -> JS), how does this work with other file types that generate code in VS? For example, ASPX and DBML files generate a ".designer.cs" file (as well as other "parent" file types). It has to check the file out if there are changes so the compile doesn't fail, correct?

I think understand your question, but there seems to be a methodology for handling this situation. I can do a full rebuild on a checked-in project and it doesn't fail because it is not checked in. Admittedly, I am making this statement from memory as we are no longer using VSS/TFS and SVN does not lock checked-in files on disk.
Jul 10, 2014 at 5:38 PM
Output files should not be included in a Visual Studio solution or in any source control system.

Those files are just noise - the same as .dlls for C# projects.

It is only necessary to have faith in the compiler, so that the existence of the source files (.ts files) will always imply the existence of the corresponding output files (.js files).

When it comes to deployment it is only necessary to
  • Compile all projects
  • Harvest the output
  • Deploy the output to a server
Similarly for coding and debugging, it's only necessary to compile the source file in order to have the .js file magically appear.

It's understandable that people new to TypeScript may not think that way, but wanting to hang on to the .js files doesn't make a lot of sense.
Developer
Jul 11, 2014 at 8:47 PM
@JimFoster

I'm not super familiar with every different codegen tool in VS but it seems a little different here. As nabog said, think about the .js like a .dll that is built by your C# project. You would never check the .dll in because you're going to have to check in a new version literally every time you change anything. The same thing would happen with your TypeScript solution now. When you change a single file you still need to emit JS for every file. So now you've got many JS files marked as changed in source control, only some of which are actually changed.

That said, I totally get the desire for the UI change, which is what the linked extension is doing, separate from issues with source control (which is our current issue just because of how VS/Solution Explorer is designed at the moment).
Jul 14, 2014 at 2:03 PM
@danquirk

I guess what I am getting at is not including the generated code in the solution (whether or not it is checked in to source control) appears to be inconsistent with how Visual Studio works (whether or not that is a good thing). Every other component I can think of in VS that generates source code from another object includes that generated source as a child item under the main item (such as .aspx -> .aspx.Designer.cs). Now, that said, I just realized that in other modules that generate code must include the generated code in the project or it will never get complied--not an issue directly with JS as it is never complied, but just served.

But, for me, it also boils down to the fact that there is no option for TS to generate minified JS files. Since I don't want to stream "fat", JS to users, I am forced to manually include the JS files in my project anyway and use other tools (Web Essentials in my case) to minify the JS.

If TS offered a minified option, then I am not sure if I personally would care as much if the JS files were included in the solution.
Oct 26, 2014 at 7:06 AM
Edited Oct 26, 2014 at 7:10 AM
This is very unfortunate. I'm creating a sandboxed SharePoint solution that contains typescript source files. The js files needs to be included in the project, because if they are no included, they will not be in the wsp solution file. And I need the js files in the wsp solution file. If the js file is not checked out, the build process fails. So I need to check out all js files before build the project. It makes more difficult to work in a team.

So please, please, bring back this feature.
Nov 21, 2014 at 12:33 PM
like @jesuslpm, I need the js files included to publish my web app to remote IIS. Sorry for spamming this discussion. Is there a place where this feature can be voted on ?
Jan 19, 2015 at 9:42 AM
You can create an ItemTemplate with the needed functionality.
I opened an issue to WebEssentials, https://github.com/ligershark/side-waffle/issues/216
Maybe you have time to look how to integrate it ?