Now to come to an end,
let's actually leave this code file and talk a bit briefly about the compiler.
Thus far, I always compiled a file by typing tsc and then the file name.
Now that's a bit cumbersome,
now actually we can't enter watch mode by adding -w thereafter.
Now it compiles but it keeps on watching that file and whenever I change something in there, it recompiles
it automatically.
Now that's better but I'll quit this with control C because it might still not be everything we want,
sometimes you also have multiple Typescript files in a project and you want to compile them all simultaneously,
for example we have other.ts and in there I console log hello which doesn't really use any Typescript
features but which still might be a Typescript file I want to compile as well.
For now I have to type tsc. app.ts and tsc other.ts if I want to compile both
and that's cumbersome.
Well we can turn this into a Typescript managed project by running tsc --init.
What this does is it creates a tsconfig.json file at which we'll have a look in a second
but even without looking at the file, we now can do something different,
we can run just tsc without any file name
we point at and also tsc -w, both is possible. When we run either of the two, what now happens?
All Typescript files get compiled.
Now you see I now get an error here and I will come back to why we get this in a second,
we didn't get it before,
now we get it, again I will come back to that
but it will compile all files and I can prove that by deleting the two Javascript files and running
it again,
now you see it created the two files.
So now we can compile all Typescript files simultaneously and we can also watch all of them
simultaneously with -w
but why am I getting an error now?
Object is possibly null,
we didn't get that before.
Well because the tsconfig.json file allows us to configure the compiler now and the default configuration
which was generated here is a different one than what we had for the tsc command without that file before.
Now you see, there are loads of options in there,
most of them are commented out and you find short descriptions here on the right, in my Understanding
Typescript course here on Udemy, I walk through all of that in way more detail. Here for example
you can control to which target you're compiling and if you set this for example to ES6, classes will
not be converted to non-class code which works on older browsers but you will end up with ES6 Javascript
code which therefore only works in browsers that support ES6,
so that's how you can control which Javascript code is produced but you also have another setting
here, the strict setting and this controls how strict the Typescript compiler is
and that's what's responsible for this error in the end. Before the compiler was not that strict,
now it effectively turned on all these options here, which checks different things in our code, for example
it checks whether something could potentially be null and could lead to unexpected errors and in app.ts,
we have such a case. When I get access to my button here and also to the inputs, what I get here
could be null.
Now here I use type casting so I make it clear to Typescript that this will not be null but an HTML
input element,
here however I rely on inference. Now Typescript infers that since I use the button tag selector,
this is an HTML button element or with a union type here,
it could also be null because if I have no button in my HTML file, I can't select one.
So this could be null and before, Typescript didn't care about this, with the strict mode here,
it now does.
Now we can either turn this on or simply not use this general strict rule but only turn on the strictness
checks we want
but here I will leave it on and show you how to work around this issue.
It's very simple,
we could even add an if check and check
if not button element, so
if this is falsy and if that's the case, we do something or we only add an event listener if it's
truthy,
so that's one thing, we could add an if check or if we know with certainty that the button will exist,
we can add exclamation mark thereafter which is also a Typescript feature, not a vanilla Javascript feature,
which tells Typescript this will never be null, ignore the null case and now our error would be gone.
So that's another Typescript feature which can be useful especially if you've got the strict option
turned on.
And now there is more
you can configure here and going through all of that it would really bloat this module and be too much
for this introductory module,
if you want to learn more about Typescript and about this file, my Typescript course or of course the official
docs are the place to go.