So that was an important first set of options.
Now let's dive into these strict options because these are pretty interesting.
There is this strict true option.
And actually what this does is it enables all strict type checking options.
So in fact if he's setting this is the same as if you would set all these options separately so you
can ever set all these options one by one or just set this option of course you want to set the individual
options if you want to have some options set to false because otherwise they're all set to true if you
want them all set to true then using just this option is of course way shorter.
Now what do these options do though.
Let's start with no implicit any no implicit any is a quite interesting option.
Debt helps us write better code.
Let's go to our analytics file here and there.
Let's add a function send analytics that gets a data option let's say and there we could send this to
a server.
But here I'm just console logging it then I call send analytics with that data.
So with the string now as you see my I.D. you already complaints here and so does typescript the compiler
because the two of course are connected.
If I tried to compile this parameter data implicitly has an any type.
So this seems to be related to this no implicit any option.
Indeed if I set this to false.
So if I set all strict options to true but it said this option two falls which I can do then this error
goes away both in the IP and when we compile the code.
So what does this option do.
It ensures and I'll comment that out again to turn it on again because of strict truth.
It ensures that we have to be clear about our parameters about the values we're working within our code
here.
We don't give types could any information about the type of data we'll get as a parameter here and we
should if typescript is able to infer this then of course it's fine.
But here how what types could be able to infer it from this line.
Well keep in mind that this function gets declared first before this file executes.
So at the point of time when the functions create it there is no chance of knowing what will end up
in there.
So here we can fix this error by simply declaring the type and being clear about which type we use their
no please note that if you had a variable locked and you set this to true here you don't get an error
about this declaration either though it all is it gets a default type of any form variables.
This is OK for parameters it's not OK.
Why is it OK for variables.
Because what typescript does for variables what is possible for variables what's not possible here because
the function is created first here types who is able to track the values you assign you see.
OK.
I got locked here like this.
Now I set it to true.
So therefore they're after if I console log locked here it's a boolean.
So typescript is here able to understand the flow of your code and they offer you don't need to be precise
regarding the type here.
Of course you want to be precise if you want to a wide that you can freely assign a new value which
you can do here because it is of type any.
So you want to still assign a type to a white this but typescript is at least able to find out if decode
your calling works with the type it currently holds.
That's not the case here because these are the function is to find before you call it and therefore
types could would have no chance of knowing if what you pass in there can be used inside of the function
strict null checks is another important option it's actually related to our button selection which we
have here.
Remember I had to add this exclamation mark here to make it work.
Otherwise I'd get an error.
Now we can also get rid of that error without adding the exclamation mark by setting strict null checks
to false.
So let's do that here and let's safeties.
And as you see this error is now gone here and I can compile all files and what do is strict null checks
do they tell typescript to be pretty well strict regarding how you access and work with values that
might potentially hold a null value and button here might be null.
It's not always pointing add a button element it's not always pointing at such a element because either
though you have such a selector heater a button might simply not exist on the page on which this script
runs and effort typescript can't tell because it's not diving into your HDD him out of file and looking
at that it can't tell whether it is will be successful or not.
And if this fails to return a pointer at a dawn node then it will return null were undefined to be precise
but that's treated equally here.
So therefore then button might hold a null value and therefore this code could fail.
Indeed if I comment out this button here if I now compile everything it works because I disabled the
null checks but I therefore now have a runtime error because I can't call event listener an event listener
on null and I got null here because I got no button.
Now this is a mistake.
We could a white by setting strict null checks to true and that's automatically set.
If we have strict set to true where typescript anticipates that this might happen and therefore forces
us to work around that now one cheap work around is this exclamation mark.
Operator here this tells typescript that you the developer know that this button exists or that this
operation will yield a non null value.
Now maybe you do.
You certainly do if you know that you are working on the age demo code and that there is a button here
that this selector here will work.
So it would be fine to use the estimation mark in this scenario.
If you have another scenario where you don't know for sure if it works and you just hope that it works
then it might be better to simply wrap the code that might fail in an if check which will be there at
runtime as well of course you could simply check if button is true for you which it won't be if it's
null or undefined and move that code into this if check here.
Now even without the exclamation mark in strict null checks mode we get no error because typescript
understands that this code is inside of this if statement and that is if statement makes sure that button
is not null and that this will not fail.
So this might actually be the cleaner work around.
However of course to save code if you know with certainty that something does exist using the exclamation
mark is shorter and an absolutely fine option.
Here I set both so that we see both.
Of course you just need one of the two things you really have check or the exclamation mark.
Strict function types here is a little bit of a more advanced setting catching some some niche bugs
which you might not have in many applications.
It is related to well function types you might be setting up so not types inside of functions but if
you define how a function should look like regarding its parameters and return value and you create
such a function type which you'll learn about in the basics module then there you can introduce box
if you work with classes and inheritance which we have learned about yet which we haven't used yet and
therefore for now let's ignore this strict bind call apply if that can be helpful.
If you do work with BIND call or apply for Dad let's quickly see an example.
Here we have our or a button and our function here.
Now let's say this would be a function which we define here with the function keyword were as an error
function.
Doesn't matter.
I'll use the function key word here click handler and in there I console log clicked and now here we
point at click handler and for some reason we want to make sure that when executes we pass in certain
arguments or we set the this keyword in there to a certain value.
Well let's say here we do expect a message argument which should be a string and we want to output this
year as well.
Now since click handler is passed to add event listener like that so that the browser basically executes
this for us if we want to pre configure the arguments which will be passed in.
We can use bind and bind as a first argument takes what we want to bind the this keyword to.
And here we could say it does not matter to us because we're not using this in this function.
So we bind it to now.
Now you see here I get an error I get an error that can be a y that if I set strict bind call and apply
to false.
Now you see the error is gone.
Now what does this option do they'll form.
It basically checks on which function you're calling bind call or apply.
And it checks if what you were setting up here makes sense.
And here typescript sees we want our argument we want a parameter in click handler with bind we're not
configuring that dough and therefore here we get an error.
If I set this back to true or adjust commented it out because of course it is set to true by default
by setting strict too Drew.
We then forget the error again.
Now if we wouldn't expect an argument here you see the error would be gone down there if we all the
room with the message because typescript understands our code and sees you're not passing in any arguments
to that method or to this function because it doesn't take any.
So that's fine.
But of course here we want one.
So we get an error.
The solution is to provide this second argument here which is the first argument you want to pass in
now typescript is really smart here.
And for example if a pass on a number it would still complain because it understands that I need a string
here if I pass in the correct string though like you're welcome then it does not complain anymore because
now it understands this and it sees that this is matching my function definition here.
So this is very useful behavior that makes sure that you don't accidentally use bind call or apply in
a way that does not work with your code now a strict property initialization becomes important once
we work with classes we can ignore it for now no implicit.
This all does not matter right now it has to do with the this keyword and types.
It basically tries to warn you if you use the this keyword in a place where it's not clear what it refers
to and always strict simply controls that the JavaScript files which are generated are using strict
mode so that this is added with that we covered all these strict options.