Here at Cloud Construct we have been using Typescript as a useful technology to accelerate cross-platform web development and reduce defects. Below is a summary of the technology and how you can start using it in your projects. Let us know if you have any feedback or questions!

Typescript Overview and Benefits

TypeScript is described as a “typed superset of JavaScript” that compiles to plain JavaScript. In plain Javascript no Data Type is specifically set on the variable.  The Data Type of variables is inferred based on the contents of their values. In contrast, TypeScript gives you the option to set the Data Type with your variable declaration. This “typing” can optimize your code and reduce software defects. Similar to Intellisense with Visual Studio, TypeScript makes it easier for IDEs to understand your code and give helpful feedback and hints.  

TypeScript is also a superset of JavaScript. This means that TypeScript code can contain plain JavaScript code and it will still compile and run normally. In addition, TypeScript adds functionality on top of JavaScript while technically containing all the same functionality of JavaScript. This added functionality means that web development can happen faster.  There is more leverage of functions and less need to be custom written.

How to Begin

If you are using Visual Studio 2013 or later you will need to install TypeScript.

If you are using the NPM Package Manager Command Line Interface for your project you would use:

npm install -g typescript

Compiling .ts files would then involve additional command:

tsc yourFile.ts

The result of this command would then be a file yourFile.js which would then run in the browser like any other JavaScript file. To automate this process every time your .ts file is modified –you would simply add the --watch option to the command.

tsc yourFile.ts --watch

If using Visual Studio, another option is to use the NuGet Package Manager. You can use the console:

Install-Package Microsoft.TypeScript.Compiler

Or use the NuGet Package Manager GUI and find the Microsoft TypeScript Compiler to install.

Once TypeScript is installed and configured, or you’re using a recent version of Visual Studio –you’re ready to get started.

A quick exercise will confirm this, below is a snippet of TypeScript code:

function greeting(name: string) {

return "Hello, " + name;

}

var person = "Sean C";

document.body.innerHTML = greeting (user);

This would insert “Hello Sean C” where there is a reference to the JavaScript file in the HTML. The JS file would be generated by the TypeScript Compiler. The only practical difference between the JS and the TS is the type. The compiled JavaScript would leave off the type definitions. These type definitions are very useful during the web development process.  For error checking, the compiler prevents compilation to JS if there is a mismatch with the types.

Good Luck!

‍