Continuing with our Microsoft MVP Theme Week, today we're highlighting a great post from Michael Crump that will help you get started with the new shiny that is TypeScript...
TypeScript with Visual Studio 2015.
TypeScript is being used everywhere from our own internal projects, like NativeScript and AppBuilder, to adoption by Google in Angular 2. It should come to no surprise that JavaScript is going to be hard to avoid in the future. But what exactly is TypeScript, how do I use it and what are the added benefits?
What is TypeScript?
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It works everywhere and is open source. It offers classes, modules, interfaces and more along with powerful tooling such as static checking, refactoring and statement completion. The easiest way to learn more is to read the language specification guide or follow the official blog.
Installing TypeScript
You can run TypeScript on Windows, Linux or Mac. If you are using Windows and have updated to Visual Studio 2015, then it is ready to go without installing any additional software. If you are using Visual Studio 2013, then you will need to install this package. If you are using Mac make sure you have Node.js and NPM installed and enter the following command:
...
The Compiler and TypeScript Definition Files
The Compiler
If you’re using one of the supplied IDEs or editors mentioned earlier, then you won’t have to do this step, but it is good to know.
You can compile a TypeScript file to a JavaScript file with the following command.
...
Studio and start our first project.
Using TypeScript With Visual Studio 2015
Regardless of which IDE or editor you have installed, we are going to take a look at how TypeScript would benefit our development team. However, in these examples, I’m going to be using Visual Studio 2015.
Before proceeding, I’d recommend installing “Web Essentials 2015” as it will make working with web projects much easier.
To get started, select “Other Languages” -> then “TypeScript” and finally “HTML Application with TypeScript”. If we look at what Visual Studio 2015 stubbed out for us then we will see the following :
...
Let’s Get to Work! – Syntax Basics
Before we can dig into TypeScript, let’s start with some of the basics. Open your IDE or editor and type the following two lines.
var name = 'Michael Crump'; //name is using Type Inference as a string since it was declared as a string
var fullName: string = 'Michael Crump'; //fullName is using a Type Annotation and is declared as a string
By reading the comments, you can see that we are using Type Inference in the first example and Type Annotation in the second since we used the
: stringannotation....
Functions and Optional Typing
We’ve already been working with optional typing, so we just need to start tying it together with a function to see the full potential. If we add the following function, we can see that it is looking for a string to be passed in. It will return “Michael Crump” after the method is called.
...
Interfaces
We have used an interface already in the TypeScript definition file, but let’s look at how this could be beneficial with creating our own. In short, interfaces describe a type. While classes and functions deal with implementation. Interfaces help us keep our programs error-free in the IDE or editor by providing information about the shape of the data that we are going to work with.
Add the following code in your TypeScript file:
...
Debugging
By default a mapping file is created that allows us to debug your TypeScript application. If you look in the folder where our .ts and .js reside, we will find a .map file. Let’s go ahead and put a break point on the return line and we can inspect the locals window to see what the value of the properties are at run-time.
...
Classes
You can think of classes as containers for different members of your application. These contain fields, constructors, properties and functions. Let’s extend the Interface we created before to use a class.
...
Keep Calm and Learn on!
There is so much to TypeScript that it can be overwhelming at times. I know that is how I felt as I started learning TypeScript and reading the language specification guide. Hopefully, this post is enough to get you started in the right direction without sifting through pages of documentation and looking at outdated code samples. I hope I’ve sparked your interest in TypeScript. So what are you waiting for? Try it out now!
Follow @CH9
Follow @coding4fun
Follow @gduncan411
