When we just put together our own Ed did mount function right here, we annotated the type of Monaco
editor as any, which is not very helpful because it's not really allowing TypeScript to do its job
and make sure that we are accessing properties and functions on that Monaco editor Ed argument that
actually exist.
So let's try applying a better type definition.
We could figure out some way to say, hey, the second argument is going to be some kind of Monaco editor
interface or something like that.
But there's a slightly different way we could approach this with TypeScript.
I'm going to go down to the Monaco editor component.
I'm going to find Ed did mount right here into a command.
Click on it.
So this will take us to the type different definition file once again, and we are told that the callback
that we provide to that prop must satisfy this interface of Ed did mount.
I'm going to do a command click on Ed did Mount.
And here is the type definition for that callback function.
This is what we must provide to that problem.
We currently kind of are right here are on Ed did Mount does satisfy this type right now.
But if we want to better describe or better annotate the type of our callback, we can import this type
into our component and then annotate on Ed did mount with it.
And when I say that, really confusing.
So let me just show you the code.
We are going to right at the very top of my file.
In addition to importing Monica, Monica, Ed, I'm also going to import Ed did mount.
So this is a type definition right here.
This is not an actual function or anything like that.
It is a type definition file.
I'm going to use that type definition to annotate on.
Ed did mount right here, so I'll put in a colon right after it and then add in.
Ed did mount.
We can then remove the type annotations we added into our arguments so we can remove that one.
And that one.
TypeScript now understands that we are trying to provide a function and assign it to an editor did mount
that satisfies this type.
So TypeScript is going to assume that get value and Monaco editor are of types.
That and that right there.
Now, if we start to mouseover, say, get value inside of our function.
We'll be told that TypeScript does understand that this is going to be a function that returns a string,
and if I mouseover Monaco editor, we are told that typescript does understand that this is an instance
of something that satisfies this interface, some kind of standalone code editor.
So now, after our little bit of code right there, if I put in Monaco editor DOT anything, we'll get
our autocomplete and we are told about all the different methods, properties and so on that exist on
a Monaco editor, for instance.
So a little bit of nasty typescript, but now we've got a little bit better type definition inside of
here.
I'm going to immediately make use of this improved type definition.
I want to add in one little updated option inside of here.
If we go back over to our browser really quickly, you might notice that when you start to tab in,
we currently are using force bases or tabs.
I don't really want to use for spaces.
I would like to use two spaces instead, just my own personal preference.
So to do so, I'm going to call Monaco editor dot git model and notice that our autocomplete is kicking
in dot update options.
And I'm going to put in tab size again, notice the autocomplete.
Online saved that.
Go back over by refresh now when I start to Tabin, I get just two spaces, all right.
Definitely a little bit better.
All right, so this is working out pretty well, we've now got a pretty solid code ed component, but
there's one last feature I want to add inside of here so I think would really make our code editor just
a little bit more awesome than it already is.
So one more feature in just a moment.