1
00:00:02,220 --> 00:00:08,040
We also got module here now module is an optional Skip for now because it really makes sense once we

2
00:00:08,040 --> 00:00:13,420
learn about modules in typescript and how we can connect multiple files.

3
00:00:13,440 --> 00:00:15,120
So let's ignore that for now.

4
00:00:15,390 --> 00:00:17,240
Lib is an interesting one though.

5
00:00:17,310 --> 00:00:25,650
Lib is an option that allows you to specify which default objects and features typescript notes.

6
00:00:25,680 --> 00:00:32,400
With that I mean things like working with the DOM let's say integrate [REMOVED] we have a button and on

7
00:00:32,400 --> 00:00:36,660
the button we say Click me and when we click this button we just want to print the message.

8
00:00:36,660 --> 00:00:44,430
Now an apt yes we can select this button we can get access to this button with documented query selector

9
00:00:44,430 --> 00:00:48,150
for example selecting the first button we find.

10
00:00:48,150 --> 00:00:53,020
Now if we do that then this works we get no time code error here.

11
00:00:53,040 --> 00:01:00,990
So if I go to my button and I add an event listener here I get an error here actually because typescript

12
00:01:00,990 --> 00:01:03,900
doesn't know for sure whether we find a button here.

13
00:01:04,050 --> 00:01:09,150
For now we can work around that with an exclamation mark after this line and I'll come back to what

14
00:01:09,150 --> 00:01:11,370
exactly this does in a future.

15
00:01:11,400 --> 00:01:17,370
It basically tells typescript Don't worry such a button will exist we will get a value here.

16
00:01:17,400 --> 00:01:22,800
So now we can add a click event here and then to find some anonymous function maybe where a console

17
00:01:22,800 --> 00:01:24,920
log clicked.

18
00:01:24,960 --> 00:01:30,000
Now the interesting thing here is not so much that I had to add the estimation Mark as I said it will

19
00:01:30,000 --> 00:01:38,400
come back to bed but that if I run CSC this just compounds now shouldn't types could complain that document

20
00:01:38,400 --> 00:01:39,690
is unknown to it.

21
00:01:39,690 --> 00:01:45,660
How does it noted we have such a document constant or variable available.

22
00:01:45,660 --> 00:01:50,670
How does it know that even if we have that available that it holds an object which has a query selector

23
00:01:50,670 --> 00:01:51,550
method.

24
00:01:51,720 --> 00:01:57,120
How does it know that button is something which has an add event listener method.

25
00:01:57,120 --> 00:01:59,290
How does types know all of that.

26
00:01:59,310 --> 00:02:05,220
Now you might say of course is knows because in vanilla javascript this would be valid code but keep

27
00:02:05,220 --> 00:02:11,320
in mind that when you write it types could code you don't necessarily write it for the browser.

28
00:02:11,370 --> 00:02:15,960
You could be writing your no dress application with TypeScript and dare indeed.

29
00:02:15,960 --> 00:02:18,220
This would all not work.

30
00:02:18,330 --> 00:02:24,420
So the reason why this works is this lib option and as you see it's not even set here.

31
00:02:24,420 --> 00:02:32,160
But if it isn't set then some defaults are assumed if it's not set the defaults depend on your javascript

32
00:02:32,160 --> 00:02:39,480
target here and for iOS 6 it by default includes all the features that are globally available in years

33
00:02:39,550 --> 00:02:40,040
6.

34
00:02:40,140 --> 00:02:46,390
For example the Map object which is available in iOS 6.

35
00:02:46,440 --> 00:02:49,170
Therefore it wouldn't complain if you use map.

36
00:02:49,170 --> 00:02:55,140
So it assumes all these years 6 features which are made available globally in javascript that they are

37
00:02:55,140 --> 00:02:56,940
available in types code as well.

38
00:02:57,120 --> 00:03:01,760
And in addition it assumes that all DRM API is are available.

39
00:03:01,810 --> 00:03:06,780
You'll find the detailed descriptions about all these options by the way in the official docs which

40
00:03:06,780 --> 00:03:08,910
are linked in the lecture at the end of this module.

41
00:03:09,540 --> 00:03:14,880
So long story short if the live options not set some defaults are assumed and these are typically the

42
00:03:14,880 --> 00:03:20,560
defaults you need to have types to run in the browser so all the dorm API is and so on.

43
00:03:20,760 --> 00:03:27,930
If we comment is in and I now compile everything idea forget an error because now by commenting it in

44
00:03:28,080 --> 00:03:30,410
we don't have to default settings anymore.

45
00:03:30,420 --> 00:03:36,570
Instead we now say hey please include some default libraries so some default type definitions you could

46
00:03:36,570 --> 00:03:44,570
say which I will give you in disarray and as you see I'm not passing any description any profs any value

47
00:03:44,570 --> 00:03:50,490
is here and then from what I'm saying to typescript now is hey regarding all the defaults you know please

48
00:03:50,490 --> 00:03:53,550
take this into account and you know nothing.

49
00:03:53,640 --> 00:03:57,440
So only if that's commented out that works because then types will assume some defaults.

50
00:03:57,480 --> 00:04:02,940
If I set the defaults explicitly well then typescript of course adheres to what I'm setting here and

51
00:04:02,940 --> 00:04:09,510
ends here for example it doesn't know document it doesn't even though the console here so therefore

52
00:04:09,540 --> 00:04:12,000
we want to set this to more reasonable values.

53
00:04:12,000 --> 00:04:15,720
And again if you will hit control space and here you get all the completion.

54
00:04:15,760 --> 00:04:21,690
And for example there we could add Dom that's an identifier and there are some predefined identifiers

55
00:04:21,690 --> 00:04:22,850
which types could understand.

56
00:04:22,860 --> 00:04:29,070
Again you find a complete list in the official docs the docs for this option are attached to this lecture

57
00:04:29,070 --> 00:04:30,150
as well.

58
00:04:30,150 --> 00:04:35,490
So this is a identifier types could understands and it's an identifier which basically unlocks all the

59
00:04:35,490 --> 00:04:37,110
DOM API and typescript.

60
00:04:37,110 --> 00:04:40,130
So the typescript understands what you're doing there.

61
00:04:40,140 --> 00:04:45,430
So now already you see it knows console it knows document and so on.

62
00:04:45,450 --> 00:04:51,330
So now since we're working with next gen javascript we should also add two years six option so that

63
00:04:51,360 --> 00:04:59,220
typescript also understands all globally available iOS 6 options and it's also a good idea to add DRM

64
00:04:59,470 --> 00:05:06,630
ignorable and script host with that year we would unlock all the core javascript features you would

65
00:05:06,630 --> 00:05:07,430
want to work.

66
00:05:07,500 --> 00:05:13,490
And this by the way is the exact default setup you get when you set target to iOS 6 anyways.

67
00:05:13,590 --> 00:05:19,050
So if you comment design and set it up like this you have exactly the same behavior as if you don't

68
00:05:19,050 --> 00:05:20,970
specify lib at all.

69
00:05:20,970 --> 00:05:27,020
Now here hero will commented in though and with that does will compile again setting this is a bit redundant

70
00:05:27,020 --> 00:05:27,290
though.

71
00:05:27,390 --> 00:05:29,100
Just want to explain what it does.