1
00:00:02,230 --> 00:00:03,670
Now to come to an end,

2
00:00:03,790 --> 00:00:10,450
let's actually leave this code file and talk a bit briefly about the compiler.

3
00:00:10,450 --> 00:00:15,750
Thus far, I always compiled a file by typing tsc and then the file name.

4
00:00:15,760 --> 00:00:17,480
Now that's a bit cumbersome,

5
00:00:17,500 --> 00:00:21,560
now actually we can't enter watch mode by adding -w thereafter.

6
00:00:21,580 --> 00:00:27,490
Now it compiles but it keeps on watching that file and whenever I change something in there, it recompiles

7
00:00:27,490 --> 00:00:28,750
it automatically.

8
00:00:28,750 --> 00:00:34,720
Now that's better but I'll quit this with control C because it might still not be everything we want,

9
00:00:34,810 --> 00:00:40,270
sometimes you also have multiple Typescript files in a project and you want to compile them all simultaneously,

10
00:00:40,270 --> 00:00:45,610
for example we have other.ts and in there I console log hello which doesn't really use any Typescript

11
00:00:45,610 --> 00:00:50,240
features but which still might be a Typescript file I want to compile as well.

12
00:00:50,350 --> 00:00:57,070
For now I have to type tsc. app.ts and tsc other.ts if I want to compile both

13
00:00:57,070 --> 00:00:58,710
and that's cumbersome.

14
00:00:58,720 --> 00:01:05,830
Well we can turn this into a Typescript managed project by running tsc --init.

15
00:01:05,920 --> 00:01:11,500
What this does is it creates a tsconfig.json file at which we'll have a look in a second

16
00:01:11,680 --> 00:01:15,570
but even without looking at the file, we now can do something different,

17
00:01:15,610 --> 00:01:19,090
we can run just tsc without any file name

18
00:01:19,090 --> 00:01:26,350
we point at and also tsc -w, both is possible. When we run either of the two, what now happens?

19
00:01:26,350 --> 00:01:29,050
All Typescript files get compiled.

20
00:01:29,050 --> 00:01:32,940
Now you see I now get an error here and I will come back to why we get this in a second,

21
00:01:32,950 --> 00:01:33,970
we didn't get it before,

22
00:01:33,970 --> 00:01:36,130
now we get it, again I will come back to that

23
00:01:36,310 --> 00:01:41,770
but it will compile all files and I can prove that by deleting the two Javascript files and running

24
00:01:41,770 --> 00:01:42,830
it again,

25
00:01:43,060 --> 00:01:46,420
now you see it created the two files.

26
00:01:46,420 --> 00:01:52,390
So now we can compile all Typescript files simultaneously and we can also watch all of them

27
00:01:52,420 --> 00:01:54,840
simultaneously with -w

28
00:01:54,970 --> 00:01:57,070
but why am I getting an error now?

29
00:01:57,070 --> 00:01:58,420
Object is possibly null,

30
00:01:58,420 --> 00:02:00,440
we didn't get that before.

31
00:02:00,490 --> 00:02:07,450
Well because the tsconfig.json file allows us to configure the compiler now and the default configuration

32
00:02:07,450 --> 00:02:14,600
which was generated here is a different one than what we had for the tsc command without that file before.

33
00:02:14,620 --> 00:02:16,720
Now you see, there are loads of options in there,

34
00:02:16,720 --> 00:02:21,640
most of them are commented out and you find short descriptions here on the right, in my Understanding

35
00:02:21,640 --> 00:02:26,470
Typescript course here on Udemy, I walk through all of that in way more detail. Here for example

36
00:02:26,470 --> 00:02:33,940
you can control to which target you're compiling and if you set this for example to ES6, classes will

37
00:02:33,940 --> 00:02:40,660
not be converted to non-class code which works on older browsers but you will end up with ES6 Javascript

38
00:02:40,660 --> 00:02:44,030
code which therefore only works in browsers that support ES6,

39
00:02:44,050 --> 00:02:50,080
so that's how you can control which Javascript code is produced but you also have another setting

40
00:02:50,080 --> 00:02:54,550
here, the strict setting and this controls how strict the Typescript compiler is

41
00:02:54,700 --> 00:03:00,780
and that's what's responsible for this error in the end. Before the compiler was not that strict,

42
00:03:00,790 --> 00:03:08,080
now it effectively turned on all these options here, which checks different things in our code, for example

43
00:03:08,080 --> 00:03:15,120
it checks whether something could potentially be null and could lead to unexpected errors and in app.ts,

44
00:03:15,140 --> 00:03:25,850
we have such a case. When I get access to my button here and also to the inputs, what I get here

45
00:03:26,030 --> 00:03:27,610
could be null.

46
00:03:27,620 --> 00:03:33,310
Now here I use type casting so I make it clear to Typescript that this will not be null but an HTML

47
00:03:33,320 --> 00:03:34,730
input element,

48
00:03:34,730 --> 00:03:41,170
here however I rely on inference. Now Typescript infers that since I use the button tag selector,

49
00:03:41,180 --> 00:03:45,500
this is an HTML button element or with a union type here,

50
00:03:45,500 --> 00:03:51,850
it could also be null because if I have no button in my HTML file, I can't select one.

51
00:03:51,980 --> 00:03:58,350
So this could be null and before, Typescript didn't care about this, with the strict mode here,

52
00:03:58,370 --> 00:03:59,960
it now does.

53
00:03:59,990 --> 00:04:08,150
Now we can either turn this on or simply not use this general strict rule but only turn on the strictness

54
00:04:08,150 --> 00:04:09,360
checks we want

55
00:04:09,560 --> 00:04:13,340
but here I will leave it on and show you how to work around this issue.

56
00:04:13,370 --> 00:04:14,250
It's very simple,

57
00:04:14,270 --> 00:04:16,450
we could even add an if check and check

58
00:04:16,490 --> 00:04:18,220
if not button element, so

59
00:04:18,230 --> 00:04:26,450
if this is falsy and if that's the case, we do something or we only add an event listener if it's

60
00:04:26,450 --> 00:04:27,060
truthy,

61
00:04:27,440 --> 00:04:32,690
so that's one thing, we could add an if check or if we know with certainty that the button will exist,

62
00:04:32,690 --> 00:04:38,810
we can add exclamation mark thereafter which is also a Typescript feature, not a vanilla Javascript feature,

63
00:04:39,170 --> 00:04:45,260
which tells Typescript this will never be null, ignore the null case and now our error would be gone.

64
00:04:45,260 --> 00:04:50,900
So that's another Typescript feature which can be useful especially if you've got the strict option

65
00:04:51,050 --> 00:04:52,640
turned on.

66
00:04:52,640 --> 00:04:53,650
And now there is more

67
00:04:53,660 --> 00:04:59,540
you can configure here and going through all of that it would really bloat this module and be too much

68
00:04:59,540 --> 00:05:01,400
for this introductory module,

69
00:05:01,490 --> 00:05:07,190
if you want to learn more about Typescript and about this file, my Typescript course or of course the official

70
00:05:07,190 --> 00:05:09,520
docs are the place to go.