{ The Rithm Blog. }

TypeScript: How To Get Started April 21, 2021

TypeScript is a language extention to JavaScript that is so hot right now. Looking at the 2020 developer survey from stack overflow, you can see that TypeScript continues to gain ground in both popularity and love for the language. If you're new to the JavaScript world and still trying to get a handle on the basics, then you may be wondering what TypeScript is useful for and when you should learn it? We'll try to explore what TypeScript is in this blog post and discuss when is a good time to start incorporating it into what you are learning.

Lets Start With JavaScript

To understand what TypeScript is, we should first understand what JavaScript is as a programming language.  JavaScript is considered a dynamic and weakly typed programming language. Let's break that down:

Dynamic: JavaScript is a dynamic programming language because the code is ready to run immediately. In other language like C++ or Java, you must first run your code through a process called compilation before you can execute your code.  In order to run JavaScript code, all you need to get started is a browser.

Weakly Typed: JavaScript is a weakly type programming language because you do not need specify what type a variable is when you declare it.  For example, in JavaScript, the following code is perfectly fine:

var myVal = "Tim";
myVal = 55;

Notice that myVal is first assigned a string and then assigned a number. In JavaScript that works because JavaScript is a weakly typed language.  In a strongly typed language, this code would not work properly because myVal would have to be either a string or a number.  It could not easily hold both types.

Common JavaScript Bugs

Having a weakly typed language like JavaScript seems like the best way to go when you're first learning.  There are not too many constraints on you as a developer.  You can easily change the type that a variable holds without even having to think about it. So why are other languages strongly typed?  What are the advantages?

One major advantages you get with a strongly typed language is better error checking before you ever run your code.  In JavaScript, you could write code like this that is broken and you won't know that the code doesn't work until you run it:

var myNum = 10;
myNum.split(""); // Error: You cannot call split on a number

In a strongly typed language, you would not be able to run code like that because the type system would see that the variable myNum doesn't have a split function.

Having taught JavaScript for many years now, I can safely say that bugs like this are quite common.  It is easy to get confused in a large code base and not know what type of data you're working with.

Now that we have an idea on what can go wrong with our JavaScript code, lets talk about TypeScript.

TypeScript

TypeScript is a programming language that was built on top of JavaScript.  All JavaScript code is valid TypeScript, so you can choose to add extra TypeScript features to your code as you start to learn new things.  TypeScript adds strong typing and is compiled by a tool called babel.  Therefore, TypeScript is not a dynamic language. So what does TypeScript look like? Well let's see our previous example:
 

// TypeScript has labels that tell the compiler
// this variable is a number
var myNum: number = 10;

// TypeScript will show an error BEFORE you ever run the code
myStr.split("");

You can also specify other types when you create a variable:

 

var num: number = 10;
var str: string = "Hello World";
var isItTrue: boolean = true;

 

These are the basic types that you'll encounter in TypeScript.  Now we have strong type safety when we are compiling our code.

Functions in TypeScript can also add type checking.  For example, let's make a function that prints something to the console a certain number of times:
 

// Specifying the type of the parameters using TypeScript
// message is a string and repeat is a number
function printToConsole(message: string, repeat: number) {
  for (var i = 0; i < repeat; i++) {
    console.log(message);
  }
}

printToConsole("Hello World", 5);

// Will not compile.  Causes an error because the
// 2nd parameter is not a number
printToConsole("Hello World", "5");

These are some of the basics of TypeScript. It can be easy to get started with the language.  TypeScript code can also get more complex as your code base grows.  So when's the best time to learn TypeScript?

When To Learn TypeScript

TypeScript is a popular langauge and can be beneficial, but I wouldn't recommend learning it when you're new to coding.  TypeScript really shines when you're working on a large project with lots of other developers.  In that scenario, its very difficult for you to know about all of the code in the code base.  So TypeScript comes in handy because it tells you more information about the variables and types. This information can really help you understand the code that you're working on in better detail. Typescript also stops you from writing bugs like the one we mentioned earlier.

How do you know you're ready to start?  Well my advice would be to make sure that you have JavaScript well understood.  If you feel comfortable with the material in our JavaScript courses on Rithm School's website (from Intro To JavaScript until Advanced JavaScript) and you also have looked at our  introduction course on Node.js, then you are in a good spot to add TypeScript to your next project.  I would also suggest starting small. There is a lot to learn with TypeScript, but you can always add basic type checking to your code and then learn about a new TypeScript feature every week.

For more resources on how to learn TypeScript, check out the  TypeScript playground and you can also see lots of great examples in the  TypeScript handbook.  Good luck learning the new language!

Written by Tim

Back to all posts