Visual Studio 2017 not compiling typescript - javascript

I recently updated to VS 2017 and I'm using a solution that used to work perfectly in VS 2015. I have enabled the "Compile on save" function in Tools > Text editor > TS/JS > Project and I'm sure I'm using the correct "code generation" option, but VS won't compile any typescript file.
The js output file already exist, it was generated by VS 2015, and when I save the ts file the bottom bar shows the "Output(s) generated successfully" message but there is no change in the js file.
Note that the project is under source control, but both ts and js files are checked out for edit.
I read online that similar issues were been resolved with lastes VS updates, and I'm sure my version of VS is up to date.
Does anyone know what's going on?

Check ts file properties in Solution explorer. If Build action = Content, change it to TypeScript file

in a .NET Core 2.1 project in which I has used VS's New Project template for React, I had to edit the .csproj and change <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> to false.
Why does this option even exist!?!?!

Solved by installing gulp and manually compile TypeScript when necessary.

Related

Go to Typescript Source Definition instead of Compiled Definition in Visual Studio Code

I am working on a typescript project with Visual Studio Code including multiple npm packages structured like this:
Source code: /src/index.ts
Compiled code: /dist/...
When I right click on imported objects and choose "Go to Definition" or click F12 or by clicking on the object with holding down CTRL, Visual Studio Code opens the corresponding .d.ts file in /dist
However, I want VSCode to open the corresponding .ts file in /src
Is it possible to change this behavior, as it is really annoying to manually search for the source file.
I've created git repo, so that you can try it yourself:
https://github.com/flolude/stackoverflow-typescript-go-to-definition
you just need to run yarn bootstrap in order to replicate the issue.
TypeScript 2.9 introduced a compilerOption called declarationMap. Per the release notes:
Enabling --declarationMap alongside --declaration causes the compiler
to emit .d.ts.map files alongside the output .d.ts files. Language
Services can also now understand these map files, and uses them to map
declaration-file based definition locations to their original source,
when available.
In other words, hitting go-to-definition on a declaration from a .d.ts
file generated with --declarationMap will take you to the source file
(.ts) location where that declaration was defined, and not to the
.d.ts.
I submitted a PR on your example repo to enable this setting.
The newer VSCode version (April 2022 or later) supports this with a feature called "Go to Source Definition" (see here). It is still a work in progress I believe (given this discussion thread), but should be working properly in most cases.

Why does Debugging of TypeScript in VS 2015 makes a dynamic file?

I am currently working on a project with AngularJS, ASP.NET and TypeScript. The problem is to get TypeScript debugging working with the original file in VS 2015. Source-maps are created and loaded from the Browser, and the breakpoint hits, but not in the original file, but in a dynamic file, which has the same code as the original. It's very painful, because in the dynamic files, you don't have any data tooltips. I have installed the latest TypeScript MSBuild (2.2.1) from NuGet and the transpiling step is working. My source-maps, JS and TS files are on the same project hierarchy in VS and the source-maps look like this:
{"version":3,"file":"LinksController.js","sourceRoot":"","sources":["LinksController.ts"],"names":[],"mappings":"..."}
My hierarchy on the browser is vstatic/[MD5Hash of file]/[jsFile]. I have searched a lot in the web, tried something like changing the 'checking for new versions of stored pages' option in IE, that didn't work. I couldn't find any solution regarding TypeScript. I use IIS, IE11 and VS 2015 Update 3.
Thanks for your time!

Recommended way to add Typescript to an existing asp.net 4 Webforms project

I am working on quite an old asp.net 4.0 Webforms project in Visual Studio 2015.
I want to start using TypeScript instead of Javascript for some of the client side code. I have used TypeScript in other projects outside of Visual Studio (e.g. using Visual Studio Code, and the node tools such as npm, gulp etc)
Now, I am trying to see how to use the TypeScript in Visual Studio, and see quite a few conflicting posts, and various versions of TypeScript / VS referred to.
I have added a TypeScript file to VS, and VS reported it now supporting Typescript and added a few lines to the project file. A have also added the VS extension for Typescript (version 2)
I build my project and get the .js and .map files. The files are in CommonJS format so I need to either load these or convert using a some sort of bundling.
This is where I don't know where to go. Also, I have read conflicting reports on how to configure the Typescript (e.g whether or not Visual Studio will use a tsconfig.json file)
In non asp.net projects I have use gulp with the gulp-typescript browserify etc gulp plugins.
Do I do the same thing in my asp.net project, or is there some other way to bundle and convert the JS to browser usable code?
If I use the gulp method, I assume this then means I will now not be using the TS compiler installed via the Visual Studio plugin (so what is the point of this if it emits CommonJS formatted cod that I can't use in the browser?
Thanks in advance for any suggestions here!
Yes, Web forms can do TypeScript and Gulp. Below are some steps:
Configure npm
Configuring Bower
Configure Bootstrap and My CSS with Gulp
Update the Master page
Configure Gulp-Watch
A complete solution can be found here.
For TypeScript ,
Unless you have a .ts file created with "Add New Item" in your project, the option "TypeScriptCompile" on the "Build Action" of the file properties is not available and it raises an exception. After the first file is created, then you find this option and can manually set it to a .ts file.
The option "Typescript file" is not available in the "Add File" options unless you have a .ts file created with "Add New Item" in your project and you are in a "Scripts" folder (if you name differently the folder where you want to add this file, this option wont be available). Of course you can add a .ts file from "Add New Item".
Please read this SO thread Type Script Web Forms

node typescript client-side debug

Is is possible to debug (breakpoints, watches) client-side .ts typescript files from visual studio (2015) directly? Most of the related issues that I have found on google and stackoverflow suggest using other browser devtools such as chrome. Is it possible to do it in visual studio?
When I create a .ts script (say index.ts), it will be transpiled into a index.js which will then be referenced from the corresponding index.html file in the script tag.
How can I set breakpoints in the .ts file (although it is the .js which is referenced?)
It is possible with IE. You have to set "Browse with" to Internet Explorer and in the project properties/web unchecked all debuggers. Than you should be able to debug client-side TS in VS.
I figured out that I can debug in visual studio but launching a a new debug session from internet explorer: menu->view->external script debugger which will start a new visual studio ide with all my files (.js and .ts mapped) loaded. I just have to make sure that the .js and .ts files are in the same directory (example: ./public/js/ ). It is not a perfect solution (for example bringing the cursor over a variable does not show the variable value. You must manually open the watch window...) But it allows me to step through my .ts files thus keeping a unified development environment: typescript with node.js on the server, typescript on the client-side within the same solution
You might try with this HTML Application with TypeScript project template from Web Essentials 2015 extension, as suggested in this post from Telerik blog.
If that works, it seems just a matter of usual VS scenario "set breakpoint; hit F5".

Debug JavaScript code in Visual Studio bundled with WebPack

I'm new to JS development and experience issues with debugging JS code in Visual Studio 2013. JS part of our web app is bundled into a single app.bundle.js file by WebPack, this file is automatically updated everytime any js file changes (we use special watch script which uses npm).
I'm able to debug JS code using Chrome and debugger; derecitve. It shows correctly mapped file under such kind of paths "webpack:///./Scripts/". It means that WebPack creates mapping correctly. But I'd like to debug directly from VS using Call Stack, break points, etc.
Any ideas?
Thanks in advance!
There is a a series of ongoing issues with Debugging webpack bundles Visual Studio. Depending on your webpack configuration and your dependency versions, this Webpack plugin may work for you. Be sure to check out the issues where can you see the ongoing conversation. If you are doing anything with Babel / ES2015+, you probably will want to upgrade to Visual Studio 2015 for syntax support.

Categories