Lesson Weekend

Angular applications are written in plain JavaScript, TypeScript, or something called Dart. But TypeScript is hands-down the most common choice. We'll write our Angular applications in TypeScript, too.

This lesson will walk through what TypeScript is, the benefits it offers, and how to install it. In the next lesson we'll practice TypeScript independently, before adding it into Angular.

Don't worry if learning a new language sounds daunting! TypeScript is actually just a superset of the JavaScript you already know. For all intents and purposes, it is JavaScript, but with a few extra features. Let’s get started.

Introduction to TypeScript

TypeScript is a free, open-source programming language that runs on any operating system. It was developed and released by Microsoft in 2012. Angular opted to adopt TypeScript in Angular 2.0, released in September 2016. Both Microsoft and Angular continue to support it.

Compiled Languages

TypeScript is also a compiled language. If you’ve taken our Java or C# courses, this term is likely familiar. If you haven't, it's likely new.

Compiled languages are languages whose source code must be "translated” before it can run. The developer writes the source code, then something called a compiler translates it into code the client (a browser, in our case) can understand.

Browsers don’t inherently understand TypeScript, but they do understand JavaScript. So, we’ll write our code in TypeScript, then use TypeScript’s built-in compiler to translate it into ES5 JavaScript. This only requires a single command, as we'll see in a moment.

Benefits of TypeScript

You may ask "If it compiles to JavaScript anyway, why aren't we just writing JavaScript to begin with?!" Here are a few of the most commonly-cited TypeScript benefits:

Early Implementation of ES6 Standards

JavaScript follows the ECMAScript standard. For a long time most of the web has been using ECMAScript version 5 (also known as ES5). The new ES6 was released in 2016, but not all browsers support it yet. (And even if they did, many users don't update their browsers the moment new versions are released.)

However, TypeScript allows us to use these new ES6 features in our code! Then, it compiles it back into ES5 for the browser to run. This means we get to learn the newest, most cutting edge JavaScript features (which will likely become standard in coming years), yet our programs will still run in almost any browser!

Documentation and Support

The Angular framework also favors TypeScript. Most Angular developers use TypeScript, and the documentation itself is written in TypeScript. (They're working on a JavaScript version, but at the time of this writing it’s not yet complete.) So it's much easier to find Angular information and resources in TypeScript, than it is in another language.

Error Catching

TypeScript uses data types to catch errors before they manifest. This can save us tons of time tracking down bugs and other issues. (We'll see exactly what this looks like in the next lesson.)

Further Reading

Victor Savkin, a member of Angular's core team, further explains why they chose TypeScript for Angular 2 in his blog post "Angular 2: Why TypeScript?".

Installing TypeScript

We need to install two packages to begin working in TypeScript:

Node TypeScript Package

This contains the compiler and all necessary tools. We'll need Node.js and npm installed on our machines first, though. (If you've completed our previous JavaScript coursework on your machine, you should already have these tools. If not, revisit the Installing Node lesson) .

We can install TypeScript globally via npm with the following command:

$ npm install typescript -g

Then, we'll confirm the installation was successful by running:

$ tsc -v

We should see something like this in response:

$ Version 2.1.4

Your version number doesn't have to match this one exactly, receiving any version number confirms TypeScript has been successfully installed.

Atom TypeScript Package

This is technically optional, but we absolutely cannot recommend it enough. This assists Atom in recognizing and properly highlighting TypeScript code, making it much easier to read.

We’ll run the following command to install

$ apm install atom-typescript

We'll need to restart Atom for changes to take place.

apm stands for Atom Package Manager. Like npm, this is a package manager for Atom add-ons. If you have Atom installed, you should already have apm too! For more information, check out Atom's apm documentation.

Conclusion

Does it seem odd to learn TypeScript in a JavaScript course? Don't worry, we're still learning JavaScript. Remember, all JavaScript programs are also valid TypeScript programs. We're simply unlocking a few extra TypeScript tools to take advantage of Angular's many features, and learn the latest, cutting-edge ES6 JavaScript before all browsers support it.

Almost every concept we learn in TypeScript is possible in JavaScript, too. (And we'll do our best to make it clear when something we learn is TypeScript-specific, or general JavaScript.)

In the next lesson, we'll begin writing and compiling our first TypeScript program. You'll likely find it very similar to the JavaScript you're already familiar with!

Terminology


  • TypeScript: A superset of JavaScript that compiles to plain JavaScript which runs in any browser.

  • Compiled language: A language which when written is then compiled into a different form when run. For example, TypeScript is written in ES6 and compiles to JavaScript version 5.

  • Compile: Translate code from one form to another. When TypeScript is compiled it is transformed to plain JavaScript.

  • ES6: Short form for version 6 of ECMAScript (commonly just referred to as JavaScript).

  • apm: Atom Package Manager, apm is included in npm; it is used to optimize installation and maintenance of Atom packages.

Additional Resources