Derik Whittaker : JavaScript

Putting the Dynamic back into TypeScript

Derik Whittaker — Wed, 08 May 2013 10:56:00 GMT

One of the really powerful features that TypeScript brings to the JavaScript world is some Static Typing, even if it is only at code/compile time. With TypeScript I can say that an object is of a certain type which implies there are only a limited set of properties/methods available to me. This is great, but it does limit the core power of JavaScript and dynamic languages in general.

Given the static nature of TypeScript, (yes I can choose to ignore this feature, but why?) which I want in most cases, the following will cause me compile time issues.

The reason this is causing me issues is because MemberInitContext does NOT contain a LoadChoachingStaffStats property, but I know that the caller may provide an object which does contain this object. Below is my definition for MemberInitContext.

Given I know this property MAY be provided at runtime I have a decision to make. I can do any of the following to resolve my build errors.

Add the property to the MemberInitContext
Create a inherited type which contains this property
Change my constructor to take an ‘any’ rather than a type
Add the dynamic back into TypeScript

I am going to choose the last option here, but how? Simple, by redefining the variable to an any INSIDE my constructor as below.

By declaring my type as an ‘any’ TypeScript is happy and lets me hack away and complete my tasks.

Long story shot is that even though TypeScript tries to impose Static typing, which is AWESOME in most cases, you can still force it back to dynamic if you want.

Till Next Time,

P.S. Check out my HTML for the XAML developer course on Pluralsight

Inheritance issue w/ Typescript (JavaScript) and MVC Bundling Ordering

Derik Whittaker — Tue, 30 Apr 2013 13:08:00 GMT

Today I extended one of our classes to use inheritance via Typescript (love that). When I refreshed the page I received an error here

When I dropped to the Chrome debugger and outputted both the values for both ‘d’ and ‘b’ I was a bit shocked. ‘d’ was valid, but ‘b’ was undefined. I tried a whole slew of things but nothing came to mind. Of course I thought maybe I was using inheritance wrong, but my syntax was right.

After some digging online I found this link which talks about how a parent class has to be loaded prior to it child for everything to work. This makes perfect sense given the way JavaScript parses code. I had this brilliant idea that I would simply add a _ prefix to my base class name and that would have the file loaded first. WRONG…

If you look at the image below you can see that _BaseViewModel.js is way at the bottom of the list and my error was being thrown in the AthleteListingViewModel…

Somehow I needed to force the bundler to load the files in the order I wanted. In our case I am NOT including each file into the bundle manually, rather I am using the ‘IncludeDirectory’ feature.

After a bit more searching I found this link which solved the same basic problem but in a much more complex way than I needed. However it showed me how I could solve the problem in a few lines of code. What I needed to do was create a new instance of IBundleOrderer and use it.

This code is my AlphaSortedBundleOrderer which solved my issues.

public class AlphaSortedBundleOrderer : IBundleOrderer
{
    public IEnumerable OrderFiles(BundleContext context, IEnumerable files)
    {
        var sortedFiles = files.OrderBy(x => x.Name).ToList();

        return sortedFiles;
    }
}

After I created my new AlphaSortedBundleOrdered I just needed to use it in my bundler. I did this as you see below.

Once I had my bundler setup correctly I re-ran the page and my .js files were ordered as expected.

Now I am sure there is a 100 ways to solve this problem, but this worked for me.

Till next time,

Validating all observables w/ Knockout validation and Typescript

Derik Whittaker — Sun, 21 Apr 2013 10:52:11 GMT

Knockout js is an awesome MVVM framework for HTML/Javascript development and there is an extension library which performs data validation called Knockout.Validation which is an equally awesome library. Today when doing some coding I needed to validate that all properties on a VM were valid. A quick search showed me this was very easy and should just work. However, I am using Typescript and for all of its awesomeness it sometimes makes life a bit more challenging than expected.

To validate an entire observable all you should need to do is first tell the validation library that your vm is under validation by doing

and then you can simply call a .isValid() on your VM as such.

However, when doing this in Typescript I was getting the red squiggly as you see here.

At first I was not sure why, so I decided to take a peek at the source for the validation and I came across the code you see below.

As you can see, the highlighted yellow is where the .isValid() method is being added to object (obj == your passed in viiew model) so I KNOW that my view model has a .isValid. Sure enough at runtime if I hit a breakpoint and did this.isValid() i would get the response I was expecting. However, because .isValid() was being added to my VM dynamically (this is the amazing power of JavaScript) Typescript did not know about the method and it was causing compile time errors.

How to fix this?

The simple solution that I found was to ‘fake’ Typescript into thinking that the .isValid computed is on my VM from the start. I did this by adding the following to my VM

Now you will notice that I am simply declaring the computed I am NO assigning it and that is ok. In fact if you look at the generated output from the Typescript compiler you will NOT see a computed created for .isValid(). But this does not matter. The Typescript compiler thinks it is there so you are free to use it off of your VM as you see here.

After adding my declaration for isValid() I was good to go and my code worked as expected both at code time and run time.

Till next time,

Setting up Unit Testing w/ Jasmine, Chutzpah and Typescript

Derik Whittaker — Sun, 23 Dec 2012 12:49:46 GMT

Recently I got back into writing html/javascript code as part of my day job and boy-o-boy have things changed since the last time i did any of this. One thing that has not changed for me however was my belief in unit testing, so it was very painful for me to be writing hundreds of lines of javascript (ok really TypeScript) code with NO tests supporting them. At first I was able to live with this feeling because I was too busy trying to relearn how to do javascript development. However, I have not reached a comfort level where the lack of tests is killing me again.

No of course in client/server land of .Net development getting started testing is dead simple, however in the Javascript/html world things are still in the toddler stage, IMO, and there are many, many options to testing and I had no idea which is the best. After doing some searching and asking on twitter I settled on Jasmine as my test runner.

Now that I picked Jasmine, how did I get started? Here is what I did (this post is a merging of many, many posts I looked at to get me pointed in the right direction)

Step 1: Create a new test project

Open up Visual Studio 2012 and create a basic MVC 4 application (empty)

Step 2: Get Jasmine

Install the Jasmine NuGet Package

Step 3: Run your application in order to validate that jasmine is running correctly

Yup, we are good

Step 4: Get Chutzpah

I wanted a way to run my tests inside of Visual Studio and this plugin seemed to do the trick. I opted to install the test adapter which can be found here

Step 5: Validate that Chutzpah adapter was setup correctly

As you can see from above, it is setup correctly.

Now I wanted to be able to author my tests in Typescript and have them run as well.

Step 6: Download the Jasmine typescript definition file. I put this inside my scripts folder as seen below

Step 7: Create my Test Spec

The trick to getting this to work of course is that I need to include the jasmine-1.2.d.ts definition file inside my .ts file as below

I also need to reference my class under test file inside my .ts file as below

Once I did both of these I could write my first test as below

Bam, now I have a jasmine test written via Typescript and runnable via the Chutzpah test running. Of course I am sure there are other ways to get this to work, this is just what worked for me.

Till next time,

How to compile all your TypeScript .ts files into a Single .js file

Derik Whittaker — Sat, 08 Dec 2012 15:00:16 GMT

Recently our team has been using TypeScript for all our Javascript work. To be honest it has been a complete pleasure as it ‘just works’. However one annoyance we quickly found was that we had to choose what was the best approach for using TypeScript. Do we have a single .ts file which compiles down to a single .js file or do we have multiple .ts files which each compile down to their own .js file. There are clearly pros/cons to both approaches

Single .ts file pros/cons

Pros:

Means keeping all our javascript in a single place, making it a bit easier to find/update
Means that we only need to reference on .js file in our bundles

Cons:

Means that our .ts file could become very large and unmanageable over time
Means that we are increasing our risk of merge issues when we commit it to git

Multiple .ts files pros/cons

Pros:

Means we have smaller files to work w/ which should allow for better manageability
Means we could include a given .js file in a view if we so chose
Means we could reduce our .js file size for downloads if we so chose

Cons:

Means we have multiple .js files which need to be references in our bundles

After weighing the pros/cons of each we decided the we better liked the idea of having multiple .ts files, but we also wanted a single .js output file. Yea we want our cake and be able to eat it to.

The good news is that this is 100% percent doable. One of my kick ass devs on our team spent a bit of time working on this problem (read that as THIS IS NOT MY DISCOVERARY) and found a solution.

The trick was finding out that the command line tool for compiling .ts files has an –out options. Below is what he did to get this to work

Step 1: setup the correct content type

Open up your .csproj file and look for all references to your .ts files. They should look something like below

You will want to change the type from ‘Content’ to ‘TypeScriptCompile’ as below

Step 2: Add the property group below to your .csproj file

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
<TypeScriptSourceMap> --sourcemap</TypeScriptSourceMap>
</PropertyGroup>

You will want to add this towards the top of the .csproj file

Step 3: Add a Before Build Step to your .csproj file

Open your .cspoj file and add the block below to the bottom of your file

<Target Name="BeforeBuild">
<Message Text="Compiling TypeScript files - $(TypeScriptSourceMap)" />
<Message Text="Executing tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'"%(fullpath)"', ' ')" />
<Exec Command="tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'"%(fullpath)"', ' ') --out Scripts/MySingleFile.js" />
</Target>

You will want to change the path in the Exec command. I have mine set to Scripts/MySingleFile.js, you may have a different need

Step 4: Add this .js file to your MVC Bundles

bundles.Add(new ScriptBundle("~/bundles/projects").Include(
"~/Scripts/MySingleFile.js"));

Step 5: Include the new bundle in your view

@Scripts.Render("~/bundles/projects")

The only issue we have found so far is that unless you use the TypeScript project template you will have to manually switch your Content type for all .ts files each time you add a new one. This is a PITA but i am sure there is a solution for this to but we have not spent the time or energy to solve it.

Till next time,