What's TypeScript?

This lesson gives a brief primer about what TypeScript is and why we’re using it in this course.

To tell you about TypeScript, I first need to tell you about JavaScript.

What’s JavaScript?

JavaScript is a programming language.

JavaScript has an interesting origin story. It started as a “weird little scripting language developed in ten days”,¹ created to add little bells and whistles to webpages. You know, things like validating that you’ve written an email address where an email address was asked for. Since then, it has evolved into the de facto default programming language for the Web—every mainstream web browser has the ability to run JavaScript code by default. This is what allows websites that you visit to be interactive and dynamic, allows features like location tracking, audio and video recording and playback, advanced graphics facilities, and more.

JavaScript is dynamically typed

Let’s unpack that, one word at a time.

• “typed”: This has nothing to do with “typing” on your keyboard. Instead, this has to do with the different types of data types that your programs can deal with, like numbers or strings.
• “dynamically”: This means that JavaScript figures out the types of values and variables “on the fly”, i.e., as a program runs.

For example, consider the following JavaScript program:

let course = "CSC 123";
course = 123;

On the first line, we are creating an identifier (or a “variable”) called course, and using it to name the value "CSC 123".² What type of data is this?

On the second line, we changing the value to which course points to the value 123. What type of data is this?

This is completely okay with JavaScript, because it figures out variable types at run time (i.e., while the program is running). In this case, the type of course is initially text, or a string in JavaScript parlance. Then it changes to a number. JavaScript allows this flexibility, but it can lead to unexpected errors if you’re not careful.

For example, suppose after the code above, you inspect the value of the following expression:

course.length

length is a property that gives us the number of characters in string. However, after the second line executes (course = 123;), course is no longer a string. It is a number.

It is meaningless to ask for the “length” of a number. As a result, this line will give us back a special value in JavaScript that indicates the absence of a value: undefined.

It turns out that these kinds of mistakes (or “bugs”) are really easy to make and difficult to track down in large programs! And by definition, they will only become apparent while the program is running, and then only if you trigger the particular conditions needed to reveal the error. This can make programming a rather time-consuming cyclical process.

Imagine a super-simplified software development process that goes like this.

flowchart LR
  w["Write code"]
  r["Run/test code"]
  t["Notice a
type-related error"]
  p["Publish changes"]

  w --> r --> p
  r --> t -- "Fix" --> w

In general, you want to move any bug-fixing activities “to the left” on the timeline above. It’s better to find a bug before running your code, and definitely before publishing it.

To help with this, Microsoft introduced a “dialect” of JavaScript that helps us detect type-related mistakes in our programs before we run the program. This dialect is rather cleverly named TypeScript.

TypeScript is statically typed

TypeScript does a series of checks on your program before you ever run it. We refer to this as static typing. “Static” as in “fixed”, or “stationary” as opposed to “dynamic”, which means “continuously changing or in motion”.

For example, when you create a variable, TypeScript figures out its type and checks that you only ever used its value in ways that are compatible with that type.

That is, it moves the “type-related error” step to left in our imaginary simplified programming process.

flowchart LR
  w["Write code"]
  r["Run/test code"]
  t["Notice a
type-related error"]
  p["Publish changes"]

  w --"Type checks satisfied"--> r --> p
  w --> t -- "Fix" --> w

In most code editors, these type checks happen as you type, resulting in a code-writing process in which we massage out type-related errors as they appear. Much faster feedback loop!

Of course, developers (and their silicon assistants) will still introduce other types of errors. Type checking does not eliminate all bugs.

Here’s how we would re-write the code above using TypeScript instead of JavaScript.

let course: string = "CSC 123";
course = 123; // Type error!

We don’t even get to line 3, where we inspected course.length. TypeScript is already unhappy!

See the example in the TypeScript playground.. What do you see, without ever running the program?