LearnGetting Started with TypeScript

Andrew Chalkley
writes on May 12, 2015

TypeScript is JavaScript with optional typing. TypeScript is a compiled language, it’s not interpreted at run-time. The TypeScript compiler takes TypeScript files (.ts) and compiles them in to JavaScript files (.js).

If you want to know why you should be interested in TypeScript and a little more about it you should check out my other post Why TypeScript is Hot Now, and Looking Forward.

In this post I’m going to get you up and running and introduce some basic syntax.

Prerequisites

You need to have Node.js and NPM installed. Check out the following posts for help if you haven’t done so already

Installation

TypeScript can be installed through the NPM package manager.

npm install -g typescript

The -g means it’s installed on your system globally so that the TypeScript compiler can be used in any of your projects.

Test that the TypeScript is installed correctly by typing tsc -v in to your terminal or command prompt. You should see the TypeScript version print out to the screen.

For help on possible arguments you can type tsc -h or just tsc.

Command Line Usage

You can use the tsc command in several different ways. Here’s a couple of helpful common usages.

Run and Compile

The following command will compile a single .ts file in to a .js file:

tsc app.ts

This will result in an app.js file being created.

To compile multiple .ts files:

tsc app.ts another.ts someMore.ts

This will result in 3 files, app.js, another.js and someMore.js.

You can also use wildcards too. The following command will compile all TypeScript files in the current folder.

tsc *.ts

All TypeScript files will compile to their corresponding JavaScript files.

Joining Files

You can also compile all your TypeScript files down to a single JavaScript file. This can reduce the number of HTTP requests a browser has to make and improve performance on HTTP 1.x sites. To do this use the --out option like so:

tsc *.ts --out app.js

Watcher

Instead of running the tsc command all the time you can use the option --watch.

tsc *.ts --out app.js --watch

Every time there’s an update to a TypeScript file it’ll recompile the source files to JavaScript.

If you’re using a wildcard like this, any new files created since running the tsc command won’t get compiled, you need to stop the watcher and start again.

Syntax

Now on to the good stuff – the stuff that makes you less error prone and more productive – it’s syntax.

Optional Typing

When there’s a variable or an argument in a function or method call, you can annotate your code with types. To annotate, follow the variable or argument with a colon and followed by it’s type.

var myName: string = "Andrew";

function printName(name: string) {
    console.log(name);
}

When you try and call the function with the missing or wrong types of parameter it warns us. Also it helps with autocompletion since every variable’s type is known and it suggests an appropriate variable to pass into the function call.

In fact, TypeScript is clever enough to know the type of the myName variable.

Interfaces

Interfaces are great ways to set up agreements on the shape of object literals. Sometimes you just need to know the structure of a thing as a data store.

In this code we want every object pushed in to the addressBook array to conform to the Contact interface. When this is compiled to JavaScript this disappears, but this is helpful in development.

interface Contact {
    name: string,
    email: string,
    phone: string
}

var addressBook: Contact[] = [];

It can warn me in the method call of push if I don’t define the type on line 9.

Or if I specify the type on the variable declaration, it could warn me on line 9 that I’m missing something in the object literal that I’m assigning to the variable. The added benefit of this is that it gives me autocompletion for the properties missing. This can be particularly helpful for when you’re dealing with a lot of object literals.

Classes

TypeScript uses ECMAScript 6 classes and adds a little TypeScript goodness.

Take this ECMAScript class.

class Monster {
    constructor(name, initialPosition) {
        this.name = name;
        this.initialPosition = initialPosition; 
    }
}

This would be totally fine in an ECMAScript 6 environment but TypeScript would like you to define the properties on your object.

interface Point {
    x: number,
    y: number
}

class Monster {
    name: string;
    initialPosition: Point
    constructor(name, initialPosition) {
        this.name = name;
        this.initialPosition = initialPosition; 
    }
}

var scary = new Monster("Alien", {x: 0, y: 0});

However there’s a shorthand, the following code does the same thing.

interface Point {
    x: number,
    y: number
}

class Monster {
    constructor(public name: string, public initialPosition: Point) {

    }
}

var scary = new Monster("Alien", {x: 0, y: 0});

Note how the constructer has the public keyword before each variable? That means you want that parameter to be a public property on the object.

So scary.name will return the string "Alien" and scary.initalPosition will be {x: 0, y: 0}.

Conclusion

There is so much more! We’ve barely scratched the surface but I hope this will get you started and whet your appetite to dive deeper into TypeScript (and ECMAScript 6).

If you want to play around with more examples online check out the Playground on TypeScript’s website. And of course you can use the awesome cross-platform editor Visual Studio Code for free to boost your JavaScript coding productivity.

10 Responses to “Getting Started with TypeScript”

  1. Thank you for your post, Andrew! It’s very clear and straightforward. I’m currently working with AngularJS but I think it’s time to upgrade to Angular2 and of course with TypeScript. 🙂

  2. Spencer on June 8, 2016 at 12:40 am said:

    tsc is depreciated. ntsc is the one to use now.

  3. Hi, Andrew! Many thanks for good stuff. What about intellsense in linux world, is there some VS alternative for quiqly start?

  4. Thank you for this article. I have read your suggested articles that are,TypeScript is Hot Now, and Looking Forward. I found this stuff very helpful and will look forward for more information.

  5. Ryan Drake on May 14, 2015 at 12:10 am said:

    Any chance of a TypeScript course on Treehouse?

  6. We’ll be focusing more on TypeScript as a language as opposed to other frameworks….at least initially. We’ll probably integrate some frameworks into it but the focus will be on getting started with the actual TypeScript language.

  7. Thank you Andrew I got first step with TypeScript. And I hope get more step.

Leave a Reply

Want to learn more about Javascript?

Learn how to use JavaScript to add interactivity to websites.

Learn more