Category Archives: TypeScript

How to build Visual Studio solution even if some of TypeScript files are not compiling

The problem :

If you are working on some ASP.NET project and you need to build it even if some files are unbuildable/will not compile (currently I apply this on TypeScript files but this solution is general) , because you for example need to change some other functionality and than continue with TypeScript work than you have a problem.  VS stops building the app and you will have only Yellow Screen Of The Death note with “Parser Error” and “Could not load type – your project name” which I suppose is caused by not generating the assembly.

So, the solutions are (among others) :

  • Exclude erroneous .ts file (which will make it not compile),
  • Say to build system to not compile particular file with something different.

The solution :

It really is simple : just set Build Action from TypeScriptCompile to None and you are done.

ts-build-actions

The strange thing is, that my Visual Studio 2013 will anyway say I have errors, but the build process is not stopped and I am able to run the app.

If you have any other solutions than feel free to post them in the comments. Thanks in advance.

How to setup post build event in Visual Studio to combine multiple TypeScript files to one JavaScript file

Hi interwebz and TypeScript users.

Just wanted to share this small idea/snippet I found on the web (the main reason to write this post was to let you skip my errors so you don’t have to find what to suffix after $(SolutionDir) and let tsc be happy with what VS is calling).

For example here : http://stackoverflow.com/questions/12926830/typescript-compiling-as-a-single-js-file

So, if you are using TypeScript and if you are wondering : “maybe I could stitch my 2-3-4 files together, that are used together in one .js file” , well that is of course possible.

Like this :

Make a post-build event, for each combined file you need to make one separate entry like this (with some sample project name and folder name here) :

tsc –out “$(SolutionDir)WebApplication1\TypeScript\Merged\two.js” “$(SolutionDir)WebApplication1\TypeScript\file1.ts” “$(SolutionDir)WebApplication1\TypeScript\file2.ts” –removeComments

Side note : Without specifying whole folder also after –out, tsc will output the combined file to bin, which is something you don’t want I presume.

And yes, you will also see errors if they happen in VS output window.

Another and maybe better take/steps would be to minify this combined .js or use Bundling and Minification built into .NET, but this is just another no code approach/tweak.

Enjoy….

AD:

I forgot to tell you about thing TypeScript added in later releases and that is , you can merge all JavaScript code to a single file in project properties here :

combined typescript js

However, I was not able to find any way to fine tweak and bind specific .ts files together so you can choose what you want in your project maybe event without any post build event. The path where VS stores the combined file is from the root of the project.

AD2: If you are using features from EcmaScript 5 in your TypeScript, than you need to pass also -t “ES5” parameter to the tsc, because otherwise build will fail. Small side note here, that ‘ES5’ doesn’t work, as they claim in help in the command line from tsc.exe itself.

AD3: You also should not forget to remove comments with –removeComments , since I presume you need this approach to minimize file size.

AD4: If you are extending some class in one of your file, you have to include this .ts file in the input files as well. (You will get exception that compiler cant find symbol – the class you inherit from, so you will know 🙂 )

How to subscribe to document.ready event from multiple TypeScript files

What I needed :

I needed to subscribe from multiple TypeScript files to ready event of document, the usual event where you hook to do some initializations with jQuery, when you need it. There are more ways, to do this.

  • You can handle the ready event on the “host” page and do what you need to do there,
  • You can, if you know you are the only one just inject your anonymous function to say window.onload but there is a problem, that the last pointer wins and you can have only one function there, just try this in you page :
    <script>
             window.onload = function() {
                 console.log('1');
             };
             window.onload = function () {
                 console.log('2');
             };
    </script>
    

    There will be only one line in console, with 2.

  • Somehow subscribe to the ready event and call all pointers no matter who subscribed and will subscribe in the host page.

First of all there are some things to clarify :

How to do it :

Since TypeScript is in fact JavaScript (its superset of JavaScript), you can use it without TS (btw I don’t use any feature from TS, maybe we could change

$(document).ready(function () {
         console.log('ts 2');
});

to :

$(document).ready(() => {
         console.log('ts 1');
});

But whatever 🙂

The key is to :

  • use jQuery in your project,
  • use everywhere $(document).ready since it will subscribe your code to the jQuery ready event and essentially chain them it the order as browser parsed the .js files,
  • include jquery.d.ts definition for TypeScript to be happy (part from DefinitelyTyped project)

The snippet of subscription code can be placed after module and class definitions in each .ts file so you can do what you need. TypeScript will just copy this JS to the resulting .js file.

In case of any questions, something interesting, another take on the same problem > please share in comments, thank you.

Download link : sample app