In this series of articles, we will introduce TypeScript, a popular programming language

We will cover the basics of TypeScript, including its syntax, data types, and type annotations, as well as some advanced features such as interfaces, classes, and decorators.

By the end of this track, you will have a good understanding of what TypeScript is and how it can help improve your development workflow!

Types in TypeScript

TypeScript in its entirety can be described in one sentence, TypeScript is JavaScript with types.

And that's exactly how the TypeScript Website describes it.

data/admin/2023/1/typescript-is-javascript-with-types.png

Is there a way we can further expand on that? Sure! TypeScript is a language that builds upon JavaScript to provide extra tools that help to catch errors and assist in your programming.

And going back to what we've just established – it achieves this through types.

In computer programming, a type is like a label that tells us what kind of information a particular value represents. For example, in JavaScript, a value of type string might represent a piece of text, like a word or a sentence. A value of type number might represent a quantity, like how many apples you have. And a value of type boolean might represent a true or false value, like whether the light is on or off.

But JavaScript already has types! What makes TypeScript special? 🤔

Let's start by looking at JavaScript and then look at how it compares to TypeScript.

JS is a dynamically typed language, meaning you can write let testVar= 5, and JS will recognize it as an Integer.

let testVar = 5;
testVar ="5";

However, in JavaScript, being the quirky language it is, we can also do this.

let variable = 5;
variable = "5";

As you can see, our variable was originally of type number, but now it has been assigned a value of type string.

That's pretty normal for JavaScript and often intentional - but it can create several difficulties.

What if you lose track of what data type our variable is?

Sounds benign but it's actually a huge problem, it's simply not very efficient to keep searching back in your code to see what data types our variables are!

That challenge becomes even more complex when the code was written by another developer.

Variables may be misused and accidentally changed without any word of warning from the interpreter. This can introduce bugs into the program because returning a string instead of a number could cause your program to malfunction.

As type reassignment is not considered an error in JavaScript, you will not be notified in runtime, and in large projects, these small problems can quickly accumulate and become challenging to manage.

JavaScript is incredible, it's super fun to play around with, but its original use case was creating animations, user effects, and buttons for web pages. Not the large-scale server and font end applications we build with it today.

Turning back our attention back to TypeScript now, once a variable is a particular type, it cannot be changed back.

Where JavaScript is dynamically typed, TypeScript is strongly typed.

If that hasn't yet convinced you, here are some reasons why JavaScript developers choose to learn and then switch to TypeScript.

  • Reduces Errors - Research has shown that TypeScript can help spot 15% of the most common bugs.
  • Readability – It better documents the code as it's a lot more explicit, in simpler terms, It is easier to see what the code is supposed to do. This is especially useful when you're working in a team, and you need to understand what other developers intended to do with their code.
  • It's Popular – knowing TypeScript will enable you to apply for some great jobs. Google, Facebook, Microsoft, and many more big names work with TypeScript. It's also the primary language employed in the Angular framework, one of React's main competitors. Some organizations are really starting to push for TypeScript for many of the reasons we will explore in this course.
  • New Perspective - Learning TypeScript will give you a better understanding of coding. Under the hood, TypeScript is still built on JavaScript's prototype chain, however, it mimics all the major syntactic features of high-level object-oriented-programming (OOP) languages like Java or C#.

TypeScript Compilation

Now, if you're a JavaScript developer, I've got good news for you:

If you already know JavaScript, you also know TypeScript, you're just rusty.

That's because TypeScript is a superset of JavaScript. This means that it includes all of the capabilities of JavaScript and adds some additional features on top.

However, when you're done coding in TypeScript, we need to reconvert our TypeScript code back down to plain old JavaScript. That's because TypeScript code itself cannot be run in a browser like Chrome or Firefox, as they can only execute JavaScript.

TypeScript comes packaged with a compiler called tsc, which interprets TypeScript files (.tsc extension) and outputs equivalent JavaScript files.

We call that process compilation.

Compilation is an umbrella term for a process that takes code written in one language and converts it into code written in another language. It's like taking a recipe written in Spanish and translating it into English so that someone who speaks English can understand it.

TypeScript comes packaged with a compiler called tsc, which is a tool that does this process of compilation for us. This way, we can use the helpful features of TypeScript to make our code easier to write and understand, and then the compiler will transform it into JavaScript.

The specific type of compilation TypeScript does is called Transpilation.

Transpilation is a type of compilation where the output of transpilation is typically readable by humans whereas the output of regular compilation is often highly optimized and difficult for humans to understand.

An example of standard compilation can be found Java which, like TypeScript, is a compiled language. Java source code is compiled down to bytecode. Bytecode is a compact and efficient representation of a Java program that is designed to be easy for a virtual machine (such as the Java Virtual Machine, or JVM) to interpret and execute. It is not a language that is meant to be read and understood by humans, but rather it is a representation of the program that is optimized for execution by a virtual machine.

TypeScript transpiles to JavaScript. Both languages are human readable.

In addition to TypeScript, another example of a language that is transpiled is Sass.

In the next step of this course, we'll take an actual look at TypeScript in action.