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:33 Let's say this is just defined as a JavaScript function. And we're taking in T, which I'm just going to describe as any for now. And we're returning hello. That's the mental model you should have here. So now when we go type example equals loose autocomplete, then it's going to error at us if we just use it like this.

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.

01:44 Now you can see, by the way, if you have got your brightness turned up, that this currently is an unused variable here. It's declared, but its value is never read. And when we start using it, then it's just like in JavaScript. It's then going to be like properly colored in. And you can see that we're now doing something with this T.

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.