Wednesday 23 January 2013

Simple Visual Studio TypeScript HTML App with jQuery

I heard about TypeScript a few months ago and have had a bit of a play-around compiling some TypeScript into JavaScript using the Node.js package, but I've not had chance to try it out in Visual Studio. Here is a simple demo that shows how the code generated by the TypeScript project template can be adapted to include jQuery support.

Thanks to this stackoverflow answer for getting me started.

Step 1: Install TypeScript Plugin

Install the Visual Studio 2012 TypeScript plugin from here

Step 2: Create a Project

Create a new project in Visual Studio 2012 using the HTML Application with TypeScript project template

Step 3: Include the jQuery Type Definitions

Create a new file in the project and call it jquery.d.ts

Paste in the type definitions from from here

Step 4: Update the app.ts File

Change the code in the app.ts file to...

/// <reference path="jquery.d.ts" />

class Greeter {
    element: JQuery;
    span: JQuery;
    timerToken: number;
    
    constructor(element: JQuery) {

        this.element = element;
        this.element.text("The time is: ");
        this.span = $('<span>');
        this.element.append(this.span);
        this.span.text(new Date().toUTCString());
    }

    start() {
        this.timerToken = setInterval(() => {
            this.span.text(new Date().toUTCString());
        }, 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

$(() => {
    var el = $("#content");
    var greeter = new Greeter(el);
    greeter.start();
});

Step 5: Include Reference to jQuery Library

Add the following markup to the head section of the default.htm file...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Step 6: Run or Debug

Run or Debug the application to see the TypeScript in action.

You can even put breakpoints in the app.ts file.

29 comments:

  1. Wow what a Great Information about World Day its very nice informative post. thanks for the post. front end developers

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Interesting topic for a blog. I have been searching the Internet for fun and came upon your website. Fabulous post. Thanks a ton for sharing your knowledge! It is great to see that some people still put in an effort into managing their websites. I'll be sure to check back again real soon. patlu games

    ReplyDelete
  4. These templates are created by web designers and sold to multiple users for profits. free html5 templates responsive

    ReplyDelete
  5. I remember my first programmable gaming keyboard (the Logitech G15) and how I struggled with it. The only reason why I wanted it, was because it was the best on the market at the time and I felt for that reason I needed to own one.school unblocked games

    ReplyDelete
  6. Yes, Definitely. The same kind of effect can be seen in the game industry. I play games that have incredible graphics (EVE Online) and other that don't (Dark Ages).cheap csgo accounts

    ReplyDelete
  7. Granted, some of these negative effects from gaming are justified. However, it must be admitted that they are as a result of the uncensored use of the video games.wii iso

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. I couldn't find any knowledge on this matter prior to.Also operate a site and if you are ever interested in doing some. thebestvpn

    ReplyDelete
  10. I was very impressed by this post, this site has always been pleasant news Thank you very much for such an interesting post, and I meet them more often then I visited this site. https://internetprivatsphare.de/bestes-antivirenprogramm/

    ReplyDelete
  11. I have perused your online journal it is exceptionally useful for me. I need to express profound gratitude to you. I have bookmark your site for future redesigns.  debestevpn.nl

    ReplyDelete
  12. I essentially discovered your site page and expected that would state that I have truly respected the experience of looking on the web diary sections. vpnveteran.com

    ReplyDelete
  13. Your post is very helpful to get some effective tips to reduce weight properly. You have shared various nice photos of the same. I would like to thank you for sharing these tips. Surely I will try this at home. Keep updating more simple tips like this. maxbet login

    ReplyDelete
  14. Backgrounds of gamers can play a part in the type of games that people play. There are all kinds of combinations for different categories relating to the type of games and type of gamers. You really need to look at the game's website to get all the pertinent information prior to buying.Best Gaming PC under 500 Dollars 2019

    ReplyDelete
  15. However, Logitech G502 Proteus Spectrum is one the best gaming peripheral wireless mouse which I found. It has a modern optical sensor which gives quick response to the movements of the hand as soon I move it.https://brawlstarsup.com

    ReplyDelete
  16. i am for the first time here. I found this board and I in finding It truly helpful & it helped me out a lot. I hope to present something back and help others such as you helped me. quiet keyboard

    ReplyDelete
  17. Thankyou for sharing the data which is beneficial for me and others likewise to see. privatsphare

    ReplyDelete
  18. The Logitech G19 and G510 are gaming keyboards with a host of different colours, whereas others have only three or just one.soho poker This is not only good for gaming especially if games are played in low lighted or even dark areas, but also a great asset to changing the style of your workstation.

    ReplyDelete
  19. I discovered your site ideal for me. It consists of wonderful and useful posts. I've read many of them and also got so much from them. In my experience, you do the truly amazing.Truly i'm impressed out of this publish fortniteonlinehack.com

    ReplyDelete
  20. We have sell some products of different custom boxes.it is very useful and very low price please visits this site thanks and please share this post with your friends. Read Gaming Keypad Reviews

    ReplyDelete
  21. The first games had a lot of things that hooked people up but most of all it was about the level of engagement that the player had with the game environment or the "world" of the game.Best Gaming Computer: Definitive Buying Guide

    ReplyDelete
  22. In this article, I will focus more on gaming itself and not so much the side of how to make gaming videos. Gamers come in all different ages, genders, religions, locations and shapes. gaming cheats

    ReplyDelete
  23. As a base, a gaming organization will demonstrate a short attempt to seal the deal portrayal, limited quantity of pictures (5, best case scenario), a couple of recordings by them and their social records. 1 토토 1 스포츠토토

    ReplyDelete
  24. You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers. https://bestgamingthings.com/anti-aliasing-what-is-it-and-what-types-are/

    ReplyDelete
  25. Im no expert, but I believe you just made an excellent point. You certainly fully understand what youre speaking about, and I can truly get behind that. Pro Gaming League

    ReplyDelete
  26. In this article, I will focus more on gaming itself and not so much the side of how to make gaming videos. Gamers come in all different ages, genders, religions, locations and shapes. slotxo

    ReplyDelete
  27. You there, this is really good post here. Thanks for taking the time to post such valuable information. Quality content is what always gets the visitors coming. ds4 windows

    ReplyDelete
  28. The post is written in very a good manner and it contains many useful information for me. app store screenshots

    ReplyDelete
  29. I just want to let you know that I just check out your site and I find it very interesting and informative. Get for more information Buy Prime ranked accounts

    ReplyDelete