Typescript provides many types to JavaScript.
Now JavaScript itself also knows some data types and I'll come back to that in this module as well but
typescript adds many more types and as you will all learn in this discourse typescript also enables
you to write your own types.
Now let's start with some of the core types which javascript already knows and which typescript all
the supports and we'll all have a look at what the difference between javascript knowing the type and
typescript using that type means one of the core types we work with in JavaScript and typescript is
the number type.
Now in JavaScript and the same is true for typescript there is only one number type.
There is no special type for integers or floats.
Instead these values here would all be numbers.
One would be a number without a decimal place.
Five.
Obviously is one with a decimal place and all these values are of type.
No other programming languages have special integer types and float or double types.
Javascript doesn't have that and types could doesn't have it either.
So we have the number type which we know from javascript.
Also as a type in typescript we also have to string data type and that would be text which you can find
in one of these free ways with single quotes with double quotes or also with back.
The last notation with back takes is a special syntax provided in modern javascript and also in typescript
which allows us to write so called template liberals that are normal strings where you can dynamically
inject some data into them and so strings are simply text and JavaScript knows about string value types
typescript does so as well.
Last but not least one of the core data types javascript knows and typescript all the supports is the
boolean data type that would be true or false and that's super important in programming obviously especially
when working with statements.
Here we got these two values and that's important because in JavaScript you also might note this idea
of truth and false values.
For example that 0 the number 0 is a false C value if you use it in the if condition it is treated as
false.
The boolean data type really just knows these two values though.
True or false and that's not just a case for typescript but all of our javascript does truth the false
C concept which you should know that is not related to data types that some behind the scenes work.
Javascript does add runtime when it sees certain values and if conditions so with numbers strings ebullience
we get a couple of core data types of course not all we got objects ends on as well but let's focus
on these types and see what typescript does with them or what we can do with them.
With the help of typescript for this I'm back to the project we saw in the first course module and there
I showed you that all you need to do now is run NPM start in a terminal navigated into this project
folder to spin up this life development server which will reload whenever we change something and here
I opened up this local host 3000 address in a new tab of my browser read.
Now I'm getting an error because I have no app has followed yet.
Of course you find this starting Project all attached to this lecture will get such a app jazz file
which we're trying to import here in our index HCM El file as soon as we compile apt yes from typescript
to JavaScript and we can do that in a new tab off the terminal.
So did we keep this process running and open a new tab instead by simply running TSC app dot t s and
what this does is it compiles the type could file and spits out a javascript file and once that happens
we can reload this page and we get the time to get started.
Output here.
So now we have this setup here where we can write some types good code and then compile it to JavaScript
code to see what it does.
Now with that India types could file I'll actually get rid of the content there because now I want to
dive into these core data types which I just showed you on the slide so that you understand how to work
with them in typescript.
Now let's start very very simple.
Let's say we have a new function ad and there we expect two numbers and one that adds to an ad return
and 1 plus and 2.
Just like that very simple function nothing typescript ish about it.
Now we have two numbers with which we want to work that could be number one here which is say 5.
And also number 2 which is maybe 2 dot 8 whatever you want two numbers here now obviously and not very
surprisingly we can add or call the add function and pass in number one and number two as arguments
to this function store to result in a new constant maybe and then to see something on the screen we
can console log the result if we do that and I recompile this file with TSC apt yes then this page should
automatically reload already.
If not you can manually reload of course and you should see 7 dot eight.
Now you might think that's not too special right.
This is a pretty straight forward javascript snippet and indeed there is nothing typescript ish about
it.
Well let's do something which will break that snippet in normal javascript.
Lets say this input here is actually not a number but some text a 5 in text.
And if we now save that and rerun our compilation command here you'll see that once this page reloads
here I get fifty two dot eight as output.
And that's obviously not the correct result of this addition.
Now do you know why we're getting this output in normal javascript which in the end are executing here
while we're getting does output because this is not the result of the mathematical additions but instead
this concatenated does as a string because it's just input here.
5 is a string and then javascript sees OK.
I got a string I'm adding something to the string.
Well certainly this something should also be converted to a string so that overall I got a string because
the first value was a string and hence what javascript does is it converts to about 8 from a number
to a string concatenated a longer string from 5 and 2 dot eight hence yielding fifty two dot eight as
a string and return instead.
So it's not treating this in a mathematical way but instead as a string and with JavaScript this can
happen.
Now of course you might think why would I write such code.
I am the developer.
Why would I make this mistake.
Well maybe you're not the one making this mistake.
Maybe this Disney's getting fetched from some user input and you introduce to the little bug in your
code where you forgot to transform this or you're working in a team and you're having a couple of script
files working together and some other developer introduce such an error it's not impossible to make
such errors but it can be hard to track them down here of course it's pretty obvious that something
went wrong because we have a basic script but in a bigger script you might not even immediately recognize
that something went wrong here and that's where typescript can help us.
We can add type assignments in this function to our parameters.
We can tell typescript that these two parameters should be of type no and not be of type.
I don't care which is the default so we do that by adding a colon here after the value to which we want
to assign a type.
So in this case after the parameter name and then the name of the type for example number would be one
of the supported names besides No you also got string or a boolean but we'll come back to those for
the moment we need number and we don't just need that on the first parameter here.
But all on the second one.
So here also we can add a colon and then number.
And now what we're saying to typescript is hey both parameters here should be of type number passing
in values of a different type is not allowed.
And indeed my idea e already complains here because visual pseudocode code has built in typescript support.
But even if we would overlook this as soon as I read compile this by rerunning TSC apt yes you will
see we get an error we get an error.
That argument of type String 5 is not a sizable 2 parameter of type number.
And it even shows us where it is happened and gives us the line number line 8.
And it's basically showing us the same I.D. shows here.
So in case we overlook that in the I.T. compiling it now fro is an error.
And that's the important thing about typescript.
It only helps us during compilation.
It doesn't change javascript to work differently at runtime because browsers have no built in typescript
support.
It can only help us during development before we compile our typescript code to JavaScript.
But there it's extremely useful because it adds an extra step an extra sanity check where here we find
out oh we made a mistake here.
This shouldn't be a string this should be a number and we can fix this and we're good.
This is what typescript does it helps you during development.
It does not change your runtime code.
Indeed here even with the default settings it compiled our error here even though it detected it during
compilation and created a file which causes the incorrect result because by default typescript does
not step in here.
Later you'll learn how you can make sure that it does but by default it doesn't even block compilation.
Still it yells at you and points at this mistake so that you can fix it and so did you can a white.
Such mistakes here by the way make sure you don't have app chairs and apps yes open at the same time.
You could get errors here and the idea regarding duplicate function implementations closing the jobs
could fall.
Fix systems.