What is TypeScript?

Even as I mature as a developer (ok, mature may be too strong a word, how about “as I get older…”), at times I still feel like a complete beginner. And these days I can attest that we noobs are feeling a bit overwhelmed with the expanding footprint of JavaScript.

It’s alternately amazing and overwhelming what you can do with the language. Frameworks like Angular 2, React, NativeScript, Ionic, and Vue are showing us the diverse implementations of JavaScript. It is everywhere. So what can we do to make JavaScript easier to write and more maintainable, all while using cutting edge standards?

That is the question asked by Microsoft some years back. And the answer became TypeScript.

A Brief History of TypeScript

If you’re curious about the birth of TypeScript, look no further than its creator, Anders Hejlsberg, who provided a great introductory video back in 2012 when the first public version was released.

it's an older video sir but it checks out

The concepts Anders mentions in this video are still valid today, which explains some of the recent explosion in interest for TypeScript.

Let’s take a quick look at how far the TypeScript team has come:

  • 2010 – Anders and his team begin development
  • 2012 – First public version released (TypeScript 0.8)
  • 2013 – TypeScript 0.9 released, adding support for generics
  • 2014 – TypeScript 1.0 released, including support baked into Visual Studio
  • 2017 – TypeScript 2.1 released (see what’s new)

TypeScript has matured, so let’s look at what TypeScript is in practice and what it provides for us today.

So What IS TypeScript?

JavaScript is TypeScript, but TypeScript is not JavaScript.

Philosophy majors rejoice!

TypeScript is an extension (a “superset”) of the JavaScript language. It differentiates itself from competitors like CoffeeScript and Dart in that plain JavaScript code can be intermixed with TypeScript. Therefore JavaScript is TypeScript.

But TypeScript has to be compiled into JavaScript before it can run in any JavaScript engine (with a web browser or in node.js). This means you cannot embed TypeScript into a web page directly using <script> tags, but TypeScript (in .ts files) can get compiled into JavaScript (in .js files) for usage.

Let’s look at an example of TypeScript syntax from the TypeScript Playground. In this case we have TypeScript code:

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

…that gets transpiled into plain JavaScript:

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
}());

Wait a minute, is that a class I see? In JavaScript?! Here we see the first of the advantages of TypeScript: TypeScript includes support for modern features such as modules, classes, constants, interfaces, and arrow functions that are part of ECMAScript 6 (aka ES6 or ECMAScript 2015). ECMAScript 6 is a significant update to the JavaScript language (the first update since 2005) and includes a lot of new features, not all of which have made it into all browsers yet.

While support for the latest ECMAScript features are appearing in browsers, TypeScript helps guarantee compatibility.

This means that by using TypeScript you can use the latest ES6 (and some ES2016/ES2017) features but not worry about browser or node version support, since TypeScript compiles to “standard JavaScript”. Even though today’s browsers support much of ES6, TypeScript levels the playing field, making sure the rendered JavaScript is 100% compatible across all platforms. The story is always evolving though, as TypeScript also supports bleeding edge features like ES2017’s object spread and rest.

“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript”

This is a great quote that comes from the TypeScript website. Let’s break down each part to dig into more of the advantages TypeScript offers.

TypeScript is a Superset of JavaScript

This is a fancy way of saying that TypeScript builds upon the foundation laid by JavaScript. Any syntactically-valid JavaScript you write today is perfectly compatible with TypeScript. You can intermix JavaScript and TypeScript without the TypeScript compiler making any rude comments on your coding style.

More importantly, as mentioned already, TypeScript allows you to leverage ES6, ES2016, and ES2017 features and compile to JavaScript. Some of those features include:

Modules, for instance, help you to better organize your code and scope variables appropriately. In this example we can import a module into a single variable, and then access the module exports:

import * as validator from "./EmailValidator";
let myEmailValidator = new validator.EmailValidator();

TypeScript also introduced generics to the JavaScript language. And while generics don’t have a lot to do with ES6, they are a very familiar construct to people coming from C# or Java.

TypeScript is Typed

Due to the dynamic nature of JavaScript variables, it can be difficult to identify bugs until the code is executed at runtime. TypeScript helps to solve this by providing optional static typing. The difference between dynamic and static typing can be huge when it comes to debugging an application. Take this overly simplistic scenario as an example:

var x = 2;
x = "two"; // some crazy person re-assigned a variable!
var y = x/2;

Now who would write such a thing? Well, if you wrote this with JavaScript, you may not spot the error until runtime. This code could be buried and you might not realize the error until a user complains.

TypeScript, by using type inference, would notice that you are changing the type from a number to a string. And you would know this as you are typing, not at runtime, saving you valuable debugging cycles.

TypeScript can also make your code more legible for other people. Take this chunk of JavaScript for instance:

function addThese(x, y) {
    if (typeof x !== 'number' || typeof y !== 'number') {
        throw new Error("Problemo!");
    }
    return x + y;
}

…could be simplified quite a bit in TypeScript with:

function addThese(x: number, y: number): number {
    return x + y;
}

This is accomplished simply by adding types to your variables!

Another bonus of a strongly-typed language is that modern IDEs can take advantage of this fact and provide code-completion options (a.k.a. IntelliSense). For example, here in Visual Studio Code, you’ll see how useful IntelliSense can be when writing TypeScript:

typescript intellisense with visual studio code

Finally, you can even take advantage of code completion in external libraries via TypeScript declaration files (think autocompletion for jQuery, Angular, React, and so on).

You can find TypeScript declaration files on DefinitelyTyped.

TypeScript Compiles to Plain JavaScript

As you know by now, TypeScript gets compiled into standard JavaScript. This compilation happens as you are writing code (using a compatible IDE or the TypeScript compiler), but before the code is executed in your website or app.

We’ve already seen an example from the TypeScript Playground of how TypeScript code gets compiled into runnable JavaScript. In some cases the compilation step generates more code, in some cases less, but you can always trust that the compiled TypeScript code will generate valid JavaScript, ready to run on any client or server application.

Angular 2 and NativeScript

TypeScript received a huge boost in notoriety when the Angular team announced that Angular 2 would be written with TypeScript. This helped to legitimize the tool and the choice of the NativeScript team had made in adopting TypeScript.

To get started developing truly native mobile apps for iOS and Android with TypeScript (with or without Angular), check out the NativeScript getting started experience or just run these commands right now:

// install nativescript from npm    
$ npm install -g nativescript

// create a Telerik NativeScript (tns) app with TypeScript enabled (--tsc flag)
$ tns create your-app-name --tsc

// switch to that new app directory
$ cd your-app-name

// run the app in either the iOS Simulator or an Android emulator
$ tns run ios|android

Next Steps

Curious to learn more about TypeScript? Check out these free resources:

Comments