Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

September 4, 2015

Use TypeScript to Prepare for Angular 2

If you are developing now in Angular 1.x with an eye toward Angular 2, the best thing you can do is to write your Angular code with TypeScript. Angular 1.x code you write in TypeScript today will look very similar to code you will write in Angular 2 tomorrow (not literally tomorrow!).

At a recent Angular conference, the members of the Angular team from Google stated that one of the best ways to code now in Angular 1.x in preparation for Angular 2 is to use TypeScript.

What is TypeScript?

image

TypeScript is an open-source programming language that is:

  • A superset of JavaScript
    • Including all of the current JavaScript syntax, plus much more.
    • Any valid JavaScript code is valid TypeScript code. And as such, TypeScript works with all existing JavaScript frameworks, including Angular.
  • TypeScript transpiles to plain JavaScript
    • So we can deploy the resulting JavaScript files for our Angular application just as we do now.
    • And the resulting files execute in any of today’s browsers on any OS.
    • Plus there is no runtime overhead of using TypeScript because all of the types evaporate and the TypeScript-only syntax is replaced … leaving only pure JavaScript.
  • TypeScript allows us to define strong types
    • Editor tooling, such as the new Visual Studio Code editor, use these types for static type checking of our code during development
    • This makes development, debugging, and refactoring easier.
    • Plus it clarifies the developer’s intent. For example, we can define that a function is meant to take in a string. Not a number, not an object, just a string.
  • And TypeScript provides class-based object-oriented programming techniques.
    • So we can optionally think of our code in terms of objects with properties and methods.
    • And the TypeScript compiler transpiles the classes into JavaScript functions.

Here is the code for an Angular controller, written using the class-based object-oriented programming techniques available in TypeScript.

AngularWTypeScript_Code

To learn more about using Angular with TypeScript, check out the Pluralsight course: “Angular with TypeScript

AngularWTypeScript

Enjoy!

3 Comments

  1.   Marc — October 15, 2015 @ 1:23 pm    Reply

    Great! Are you working on a Pluralsight course on Angular 2? Now THAT would be a hit.

  2.   milben — December 6, 2015 @ 6:53 pm    Reply

    Hi Deborah,

    I’ve been developing angularjs for more than two years and this is my first time to engage in typescript in preparation for Angular2 which is still not quite there yet.

    I just want to check out one of your video in the ProductListCtrl where you’ve created a ProductListCtrl.ts so that when you save it you it will be automatically glued to the view ProductListView.html. But to my surprise, the js file produces doesn’t bind because it becomes an IIFE prior to the actual binding of the ProductListCtrl function. I have to modify the actual javascript a bit before it can be bind to the actual PRoductListView.html…. I am using the latest Typescript 1.7.3 and not sure whether the conversion of ts to js affects it and not the desired controller as what you have mentioned in your videos.

    •   deborahk — January 21, 2016 @ 3:44 pm    Reply

      Sorry for the delay in checking this post for responses. Were you able to resolve your issue?

Trackbacks/Pingbacks

  1. Dew Drop – September 8, 2015 (#2085) | Morning Dew

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2019 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs