Intro to TypeScript

In this video I'm using an online editor called Plunker to write and run Angular code. The book and code has since been updated to use StackBlitz instead. To understand more about why and the differences between read this.

Learning Outcomes
TypeScript vs JavaScript
Transpilation
Summary

In this lecture we will explain what TypeScript is and how we can code a web application using TypeScript.

Learning Outcomes

Difference between TypeScript and JavaScript.
How we convert from TypeScript into JavaScript.

TypeScript vs JavaScript

From the previous lecture we named the file we are going to type our code into script.ts

The reason the file ends in .ts instead of .js is that Angular is written in a superset of JavaScript called TypeScript.

TypeScript is the ES6 version of JavaScript plus a few other TypeScript only features which Angular needs in order to work.

You can write Angular applications in either TypeScript, ES6 or even ES5 JavaScript.

However Angular itself is written in TypeScript, most examples on the web are written in TypeScript, most Angular jobs require you to write TypeScript so this book will be teaching in TypeScript.

Transpilation

Browsers don’t support TypeScript. Browsers barely support ES6 JavaScript. So how can we write our code in TypeScript?

We use something called a transpiler which converts from one language to another.

We can write in TypeScript and have a transpiler convert to ES6 or ES5.

Tip

To understand why is it called transpilation and not compilation in more detail see https://www.stevefenton.co.uk/2012/11/compiling-vs-transpiling/

Since most browsers don’t support ES6 features yet we are going to transpile our TypeScript into ES5.

Note

Later on in the book I’m going to show you how to transpile TypeScript into JavaScript locally on your computer, but since we are using Plunker we are using a feature of SystemJS which lets us transpile in the browser.

If we look at the tsconfig.json file in our demo plunker we can see there are a few settings we are using to convert TypeScript into JavaScript.

{
  "compilerOptions": {
    "target": "es5", (1)
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

1	As you can see the target is set to ES5.

Summary

TypeScript is just JavaScript with a few more advanced features.
Browser can’t run TypeScript so we first need to transpile it into JavaScript.
The most common version of JavaScript is currently ES5 so we transpile TypeScript into ES5 JavaScript.

Caught a mistake or want to contribute to the book? Edit this page on GitHub!

Advanced JavaScript

This unique course teaches you advanced JavaScript knowledge through a series of interview questions. Bring your JavaScript to the 2021's today.

Level up your JavaScript now!

[🌲,🌳,🌴].push(🌲)

If you find my courses useful, please consider planting a tree on my behalf to combat climate change. Just $4.50 will pay for 25 trees to be planted in my name. Plant a tree!