Implement a Generic Type Helper
Creating a Type Helper
Let's start by declaring a type
LooseAutoComplete, which accepts a type variable
type LooseAutoComplete<T> = ...
<T> indicates that
LooseAutoComplete takes an argument of type
T, kind of like a function.
For example, if we set `LooseAu
00:00 Okay, so the first thing we need to do is set up a type function which is going to capture this behavior. The way we can do that is by saying type loose autocomplete. That's going to be the name of this function. And we're going to give it a T here. Now, what are these brackets doing?
00:16 Well, these brackets are basically describing that this loose autocomplete takes in an argument of T. So now if I just return, let's say I just return hello, for instance, like this. Now, what we've got here is kind of like a function. So we've got loose autocomplete.
00:52 Because it requires one type arguments. And here we've got generic type as well. So it's using that phrase generic type. This is a generic type, a type helper in my language. So how do we pass it something? Well, we can pass it something using this syntax here.
01:11 So if we pass it just like, let's say 123 inside here, what do you think example is going to be? Well, example is going to be hello, because that's what we're returning from this type here. That's what we're returning from this return statement, let's say.
01:26 So how do we actually capture this logic inside our loose autocomplete helper? Well, what we can do is let's say that we're passing in icon into here. Now icon is home or settings or about. And let's say we were just to return this from loose autocomplete.
02:03 So now example is going to be home settings or about, because that's what this icon represents. We could add something onto this union if we like. We go icon or 123. And now we've got icon or 123 in there. Pretty cool, right? So how do we capture this logic inside here?
02:21 Well, we can say whatever gets passed in icon or button variance is going to be our T. And now we can say T or string and empty object. And now what we get is icon or string or empty object. This means then that we can actually remove both references to this.
02:40 And we can say, let me grab that there, wrap both of these in brackets and go loose autocomplete. Lovely. Now we're getting somewhere. You can see now that loose icon is loose autocomplete icon and loose button variant is loose autocomplete button variant. And we can even add a comment onto here.
02:59 Comment explaining what loose autocomplete does. Beautiful. So now these icons down here, is this still working? Do I get autocomplete? Yes, I do. Fantastic. Do I get autocomplete down here? Yes, I do. Brilliant.
03:15 So this pattern then is so useful because not only does it let you capture different types in different type functions, just as you would in kind of normal functional programming, but it means that you can actually describe what these complicated setups do here.
03:32 And it means that actually your code becomes a lot more readable.