To TypeScript or Not to TypeScript

Many times, when I go speak on modern development, I get asked the same question, “Do I have to use TypeScript?” So I figured I would answer this through a blog post so I can make sure I answer all the pieces to this question. If you haven’t used TypeScript before I’ll cover what TypeScript is and provide the information so you can decide whether you want to use TypeScript in your projects.

TypeScript?

According to http://www.typescriptlang.org/, which is the location for all information relating to TypeScript, TypeScript is “a typed superset of JavaScript that compiles to plain JavaScript.” TypeScript is a project maintained by Microsoft that has been around for, at the time this was written, 4 years. It was released publicly in October 2012. TypeScript does not take anything away from JavaScript which is why it is called a superset of JavaScript. In theory your JavaScript code will still work in TypeScript. The strengths that TypeScript adds are that things are typed. This means that the IDE knows more information about the options that are available as you are writing your code, thus enabling intellisense and code completion.

TypeScript Additions

The additions to JavaScript add a lot of functionality and concepts that server side developers are used to. This is not an exclusive list but some of the key features that you will be using on a regular basis.

Typing

The biggest thing that you will notice with TypeScript is that everything is tied to a type instead of like JavaScript is where everything is generic. The way I think of this is that when you create a property you are creating a virtual bucket to store things in. With JavaScript, you get a bucket that can hold anything. In TypeScript, you get a bucket that only allows the defined types of data to be placed in this bucket. Where this really comes in handy is that as you are coding in JavaScript if you reference a bucket that hasn’t been created yet JavaScript will create a bucket for you, while in TypeScript you will be notified that the bucket hasn’t been created yet. So for example if you create a variable called bar, then later in your code you mistype and type the variable at barr. In this scenario JavaScript will say, “You are accessing barr, I don’t have that bucket yet so I’ll create that for you.” TypeScript on the other hand will say, “Hold on, I don’t have this bucket yet. Either you typed this wrong or you need to define this bucket so I know you are putting in it.” When you are creating your properties in TypeScript you will need to specify what type of data will go in to the property. You do this by adding a colon and the type. Here are the following types:

  • Boolean – true or false value
  • Number – any numeric value
  • String – any string value
  • Array – specifies an array of any other types
  • Enumerations – allows definition of custom lists of options
  • Any – generic, allows any data
  • Void – used in functions to specify that it will not return a value
  • Custom Class or Interface – covered later

We’ll cover classes and interfaces in a minute. Included below is a sample of defining a Boolean variable.

In TypeScript “let” is similar to “var” except that “let” variables are scoped to the nearest enclosing block, whereas “var” will be scoped to the nearest function block. The biggest difference is, for example, in if and looping statements if you use “var” the variable scope will be hoisted to the function level while “let” will stay in the scope where it is defined. Consider the example below.

From this we can see the differences of the availability of the different variables based on how they are defined. Also on lines 24 and 25 I am trying to assign values that don’t match the types that were specified and the IDE is notifying us of the problem.

String Templates

Normally in JavaScript we can work with strings using single (‘) or double (“) quotes. These still work in TypeScript as well, but we also get a new designator to work with strings. In TypeScript we can use the backtick(`) character. With the classic way or working with strings we are limited to a single line. These strings are trickier to inject other pieces of variable in the string. For example if we want to create a multiline string with variables added in we have to do the following:

The same sample in TypeScript is a lot simpler:

 

Classes

In TypeScript we can use classes to compartmentalize our code and use object inheritance that were trickier to do in regular JavaScript.

In this example, we are using a few different concepts. We are using classes, inheritance, and interfaces. Now we could create the same concepts in our JavaScript code but the code is a lot nastier and much harder to work with. Another concept that we can take advantage as well is constructors. So instead of setting the Name and Age individually like we did, we could have passed them directly when we were creating the cat object.

Intellisense

With TypeScript we get the autocompletion and Intellisense that we are used to using with more powerful tools. We can now take advantage of it in our web front end projects as well.

Going Forward

Another compelling reason is that a lot of major players have adopted it. Why does someone else matter to me? Angular and Microsoft for example are using TypeScript for their new features. With that you will start seeing TypeScript becoming the standard for demos and documentation released by these groups.

In the end the decision is up to you since everything boils down to JavaScript in the browser but I think there are enough benefits that it would be in your best interest to adopt TypeScript into your processes. Start small, create some pieces in your projects and start pulling things together and enjoy.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.