Entries:
Comments:
Discussions:

Loading user information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading user information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

TypeScript and You

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 : string annotation.

...

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:

...

interfacedemo

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.

image

...

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!

[Click through for the entire post]



Tags:

Follow the discussion

  • Oops, something didn't work.

    Getting subscription
    Subscribe to this conversation
    Unsubscribing
    Subscribing
  • help\

  • Michael CrumpMichael_​Crump Microsoft MVP

    How can I help @mysticaltj?

  • chanmmchanmm chanmm

    How to replace javascript with typescript in my asp.net project?

  • Quinntyne BrownQuinntyne Brown

    Sample code of an Angular 2 app or an Aureila app using TypeScript with decorators, back-ticks, imports in Visual Studio would be super super beneficial!!!

  • Quinntyne BrownQuinntyne Brown

    Out of the IDE's and code editors (VSCode,WebStorm,Atom), Visual Studio seems to be the farthest behind in fully supporting TypeScript 1.6.

    Not sure why that is.

  • @mysticaltj If you are using Visual Studio, install the VS TypeScript extension. Then, rename your *.js files to *.ts and the next time you build your solution, your TypeScript file will be compiled to JavaScript. 

    NOTE:  I would do this on a separate branch to make sure I don't break a functional solution. I hope this helps you get started with TypeScript

  • Quinntyne BrownQuinntyne Brown

    @mysticaltj @cmatskas @mbcrump but you will not be able to use backticks and decorators without a little more work. How can you use ES2015 modules in Visual Studio?

  • Quinntyne BrownQuinntyne Brown

    @cmatskas @mbcrump @gduncan411 If you guys don't have a good solution of how to build real, future proof applications using all the power of TypeScript in Visual Studio, you should NOT promote TypeScript with Visual Studio yet.

    There is not point in diving into TypeScript in Visual Studio and then when you try to use the "decorators" functionality everyone is talking about, you are blocked and you have to go Visual Studio Code.

  • @mysticaltj:  Download typescript from here hwww.typescriptlang.org/ and the clone this project github.com/QuinntyneBrown/typescript-playground

  • Typescript is cool thing but there is one major drawback... you need to generate definition files by yourself (if you are referencing existing Jacascript components in your TypeScript code this can be pain in ars) :/

    I translated one application into TypeScript and I am really happy with the result. Building extensions around it is now much more fun and productive. I hope we'll see TypeScript continue to grow and improve in future.

    Thank You Microsoft :)

  • TypeScript is a really good tool. It looks easier to build extensions now.

Remove this comment

Remove this thread

Close

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.