1
00:00:01,090 --> 00:00:06,400
When we just put together our own Ed did mount function right here, we annotated the type of Monaco

2
00:00:06,400 --> 00:00:11,470
editor as any, which is not very helpful because it's not really allowing TypeScript to do its job

3
00:00:11,470 --> 00:00:16,660
and make sure that we are accessing properties and functions on that Monaco editor Ed argument that

4
00:00:16,660 --> 00:00:17,420
actually exist.

5
00:00:18,010 --> 00:00:20,050
So let's try applying a better type definition.

6
00:00:20,470 --> 00:00:25,270
We could figure out some way to say, hey, the second argument is going to be some kind of Monaco editor

7
00:00:25,270 --> 00:00:26,590
interface or something like that.

8
00:00:26,860 --> 00:00:29,470
But there's a slightly different way we could approach this with TypeScript.

9
00:00:30,090 --> 00:00:32,680
I'm going to go down to the Monaco editor component.

10
00:00:32,900 --> 00:00:36,310
I'm going to find Ed did mount right here into a command.

11
00:00:36,310 --> 00:00:37,090
Click on it.

12
00:00:38,290 --> 00:00:43,390
So this will take us to the type different definition file once again, and we are told that the callback

13
00:00:43,390 --> 00:00:48,460
that we provide to that prop must satisfy this interface of Ed did mount.

14
00:00:49,120 --> 00:00:51,880
I'm going to do a command click on Ed did Mount.

15
00:00:52,450 --> 00:00:55,240
And here is the type definition for that callback function.

16
00:00:55,630 --> 00:00:57,450
This is what we must provide to that problem.

17
00:00:57,820 --> 00:01:03,130
We currently kind of are right here are on Ed did Mount does satisfy this type right now.

18
00:01:03,610 --> 00:01:09,220
But if we want to better describe or better annotate the type of our callback, we can import this type

19
00:01:09,220 --> 00:01:13,800
into our component and then annotate on Ed did mount with it.

20
00:01:14,410 --> 00:01:16,240
And when I say that, really confusing.

21
00:01:16,240 --> 00:01:17,680
So let me just show you the code.

22
00:01:17,680 --> 00:01:20,380
We are going to right at the very top of my file.

23
00:01:20,740 --> 00:01:27,450
In addition to importing Monica, Monica, Ed, I'm also going to import Ed did mount.

24
00:01:27,970 --> 00:01:29,970
So this is a type definition right here.

25
00:01:29,980 --> 00:01:32,590
This is not an actual function or anything like that.

26
00:01:32,830 --> 00:01:34,240
It is a type definition file.

27
00:01:34,660 --> 00:01:38,320
I'm going to use that type definition to annotate on.

28
00:01:38,320 --> 00:01:42,630
Ed did mount right here, so I'll put in a colon right after it and then add in.

29
00:01:42,670 --> 00:01:44,440
Ed did mount.

30
00:01:46,370 --> 00:01:51,740
We can then remove the type annotations we added into our arguments so we can remove that one.

31
00:01:52,630 --> 00:01:53,830
And that one.

32
00:01:55,260 --> 00:02:01,410
TypeScript now understands that we are trying to provide a function and assign it to an editor did mount

33
00:02:01,650 --> 00:02:03,240
that satisfies this type.

34
00:02:03,930 --> 00:02:10,020
So TypeScript is going to assume that get value and Monaco editor are of types.

35
00:02:11,490 --> 00:02:13,170
That and that right there.

36
00:02:14,190 --> 00:02:18,120
Now, if we start to mouseover, say, get value inside of our function.

37
00:02:19,080 --> 00:02:22,740
We'll be told that TypeScript does understand that this is going to be a function that returns a string,

38
00:02:23,100 --> 00:02:28,860
and if I mouseover Monaco editor, we are told that typescript does understand that this is an instance

39
00:02:28,860 --> 00:02:32,820
of something that satisfies this interface, some kind of standalone code editor.

40
00:02:33,420 --> 00:02:39,840
So now, after our little bit of code right there, if I put in Monaco editor DOT anything, we'll get

41
00:02:39,840 --> 00:02:44,430
our autocomplete and we are told about all the different methods, properties and so on that exist on

42
00:02:44,430 --> 00:02:45,920
a Monaco editor, for instance.

43
00:02:46,620 --> 00:02:50,730
So a little bit of nasty typescript, but now we've got a little bit better type definition inside of

44
00:02:50,730 --> 00:02:50,940
here.

45
00:02:51,640 --> 00:02:54,630
I'm going to immediately make use of this improved type definition.

46
00:02:55,320 --> 00:02:58,670
I want to add in one little updated option inside of here.

47
00:02:59,250 --> 00:03:03,630
If we go back over to our browser really quickly, you might notice that when you start to tab in,

48
00:03:03,930 --> 00:03:07,020
we currently are using force bases or tabs.

49
00:03:07,410 --> 00:03:08,760
I don't really want to use for spaces.

50
00:03:08,760 --> 00:03:12,180
I would like to use two spaces instead, just my own personal preference.

51
00:03:12,660 --> 00:03:20,160
So to do so, I'm going to call Monaco editor dot git model and notice that our autocomplete is kicking

52
00:03:20,160 --> 00:03:23,280
in dot update options.

53
00:03:26,120 --> 00:03:29,480
And I'm going to put in tab size again, notice the autocomplete.

54
00:03:32,820 --> 00:03:33,630
Online saved that.

55
00:03:34,840 --> 00:03:41,130
Go back over by refresh now when I start to Tabin, I get just two spaces, all right.

56
00:03:41,410 --> 00:03:42,720
Definitely a little bit better.

57
00:03:43,850 --> 00:03:49,130
All right, so this is working out pretty well, we've now got a pretty solid code ed component, but

58
00:03:49,130 --> 00:03:54,170
there's one last feature I want to add inside of here so I think would really make our code editor just

59
00:03:54,170 --> 00:03:56,300
a little bit more awesome than it already is.

60
00:03:56,660 --> 00:03:58,400
So one more feature in just a moment.