All language subtitles for 002 What & Why__en27

So what is TypeScript

and why would you use it?

TypeScript is a so-called "superset" to JavaScript.

It's a programming language which builds up on JavaScript.

It extends JavaScript you could say,

and that is really important.

The core programming language still, is JavaScript.

So the base JavaScript syntax you know,

how you write JavaScript code,

if statements, for loops, objects, all that does not change.

But TypeScript then adds more features

to the JavaScript syntax, and that's also important.

Unlike React, TypeScript is not a library for JavaScript,

so it doesn't use JavaScript features

to build new features on top of them,

to build functionalities around them.

But instead it extends the core JavaScript syntax,

and most importantly, it adds static typing to JavaScript.

And that's also where the name comes from, TypeScript.

It adds static typing to JavaScript,

because JavaScript on its own is actually dynamically typed.

And what does this mean and why is this useful?

For this, I prepared a very simple example here,

which you find attached.

This is not a React app,

this is a standard JavaScript function

and a standard HTML file, which has no actual content

but which imports this script file.

Now, if I open this file in the browser,

simply by copying the path here

and then opening that path in the browser,

if I reload this page and open the developer tools,

I see seven here in the developer tools,

in the JavaScript console.

And I see seven here because in this script file,

I define an "add" function,

and then I call this "add" function

and store the result in this constant

and then I log this constant.

So that's standard JavaScript, nothing fancy here.

Now JavaScript has types.

JavaScript knows the concept of types.

For example, here, the two values which I'm passing in,

are of type "number",

and that's something JavaScript knows

on its own, without TypeScript.

The important thing just is that,

JavaScript as I just mentioned, is dynamically typed.

Which means that this function here,

does not expect any particular types.

It just knows that it will receive two parameters,

and that's it.

So it's not statically typed,

the types for this function are not announced ahead of time,

instead it just takes whatever it gets

and then tries to execute this code.

And that code happens to work with numbers.

But this code also happens to work with strings.

And hence, if I convert my two numbers into strings here,

by wrapping them with quotes,

then I got two different types here,

I got two strings instead of numbers,

which are types JavaScript knows.

And if I change it like this and saved as file,

if I reload, you see now we get 25 here,

because now the plus operator

does not add these two arguments in a mathematical way,

but instead it concatenates two strings

because it receives two strings here.

And that shows why just JavaScript is okay and great,

but why it might not always be best.

Why having static typing could enhance your code

and prevent errors like this.

Now, of course you might say, "Which error?

I can simply not call "add" like this,

I just make sure that I always pass into numbers,

and it won't face this problem."

And that's true, but in a bigger project,

with lots of code files,

and potentially a lot of people working on the code base,

you might sometimes call a function

or use some object in an unintended way.

And then you could run into problems like this,

because nothing is warning you

that this is not how you should use this function.

Nothing is telling you,

that this function actually wants two numbers,

instead of two strings or any values.

And that's where TypeScript can help us.

Because with TypeScript, and I'll show you this code

even though we haven't installed TypeScript yet,

but I have it installed on my system already,

and we will install it together in the next lecture too.

But let me show you this first.

So with TypeScript, if I copy this code,

what we will be able to do is,

we can add type annotations here,

simply by adding a colon after our parameter,

and then adding the type

which should be used for this parameter.

I'll do this for B as well.

And we'll also not just be able to use type annotations

on function parameters,

but as you will see throughout this module,

we can use types and many other situations as well.

So now I am making it clear,

with TypeScript that here, I actually want two parameters

which both should be of type number.

And hence, I already get an error here in my IDE,

which tells me that this argument of type string

is not assignable to a parameter of type number,

pretty helpful.

And with that, I can catch such an error,

such an unintended use of this function

before I run and test my code.

And that of course allows us

to write better code in the end,

because we can avoid such errors

and we don't have to track them at runtime

but we see such errors right, when we start writing code.

And that's why using TypeScript could be worth a thought.