Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Enhanced JavaScript with TypeScript

Tuesday, April 25th, 2017 by Servage

typescriptTypeScript is a relatively new programming language from Microsoft. It is a superset of JavaScript and adds some useful features to make JavaScript coding easier and less prone to errors. What does that mean and what are these useful features? Let’s find out!

Static Type Checking

As the name suggests, TypeScript introduces type checking. In practise this means that variables can now have a type. In typical JavaScript, all variables are created with the var keyword in ES5 and with let in ES6. The variables are automatically assigned the correct type based on what value the variable holds. This makes JavaScript a dynamically typed language. However, TypeScript is a statically typed language since all variables can be made to strictly hold only certain types of values, such as booleans.

Assigning a type to a variable in TypeScript is done by using a semicolon after the variable name, followed by a space and the type of the variable. The following code declares a new string: var username: string = ‘John’. TypeScript supports all common types, such as strings, integers and booleans. Arrays can be created as follows: var username: string[] = [‘John’, ‘Doe’].

The reason to use this kind of static typing is to make your code less prone to errors. For example, if you are accidentally trying to add together a string and a boolean value, your code will not run because TypeScript checks for this type of errors before the application is executed. In addition, if you use an IDE with TypeScript support, it will underline operations with incompatible values. If your application gets big and complex, this can save you from errors that are hard to track down at later stages of development.

Classes

Static typing is the biggest feature that TypeScript adds to JavaScript, but there are other significant features as well, such as the addition of classes. If you have used ES6 before, you may have noticed that it supports classes. Because TypeScript is built on top of ECMAScript, you can use classes in TypeScript too! You can even type hint the parameters of class constructors and all methods inside a class like this: constructor(width: number, height: number) {}. It is also possible to specify what type of value can be expected back from a method call: getHeight(): number { return this.height; }.

Decorators

Decorators are another feature inherited from ECMAScript. They allow you to customize the functionality of classes without modifying the class itself. Decorators are popular in frameworks such as Angular 2, which actually uses TypeScript as the main language to build Angular applications.

Compiling TypeScript to JavaScript

Because TypeScript and JavaScript are different languages, and TypeScript cannot be run by browsers directly, it must be compiled to JavaScript. If you install TypeScript using npm, it comes with a tool called tsc (TypeScript compiler) that allows you to use it from a command line. Using the tool is simple: tsc file.ts. This compiles file.ts to file.js. If you use TypeScript with Angular 2, it comes with a similar tool called angular-cli that does this automatically for you whenever changes are made to your TypeScript files.

Enhanced JavaScript with TypeScript, 5.0 out of 5 based on 3 ratings
Categories: Software & Webapps

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.