Create autocomplete helper which allows for arbitrary values

0:00 Sometimes, you run into an issue where you want some autocomplete, but not total autocomplete. For instance, here, we have a React component which takes in a prop which is a size. This size here can be either SM or XS.

0:16 Imagine that we design an API where you can either pass in SM, XS, or can you pass in any arbitrary value. Here, what you might think is the right thing to do is go "or string" here. This is a union type, so it has SM or XS or string. This seems to make sense, except that you lose all the autocomplete on the size prop, which isn't really what you want.

0:41 The reason this happens is that TypeScript is quite clever with union types. It tries to pull in all of the types that it can. For instance, if you specify the same type twice, like XS, then it won't show up twice in the autocomplete. You'll just have SM and XS.

1:00 The reason that this is happening with the string is it's saying, "OK, SM is a string, and XS is also a string. What we need to do is remove these two, and then only offer string," which is why you don't get any autocomplete. The way we can get around this is we can actually use the omit utility type.

1:19 We can omit XS or SM from the union. Now, TypeScript won't collapse these three things, and you'll have the autocomplete here. You'll have SM, XS, and you'll be able to pass any other arbitrary value. We can even turn this into a type helper, if we want to.

1:37 We can say type loose autocomplete with a T, and we're going to say extend string, just because we're dealing with strings here, and we're going to say T, or we can have omit string T. This is a way of just taking this information up here and turning it into type helper.

2:00 Now, we can just wrap this with loose autocomplete, and it's going to work for us. Again, XS, SM, and any arbitrary value.