This lesson involves TypeScript, so if you aren't familiar with TypeScript yet, then feel free to skip it. But if you enjoy using TypeScript, then stick around. I'm going to show you how to make your plugin options type safe. But first, be aware that I've made a few changes between this lesson and the last.
ts for our plugin file. I've also included some other configuration files so that TypeScript behaves properly, and some other small details like that. So, to best follow along with this lesson, you should use the link in the description below to get to this starting point. Alright, now onto the objective at hand.
That is, making our plugin options type safe. But first, what do I mean by that exactly? Well, right now, If I were to delete all the options that are inside here, and then press control space bar in order to open up the autocomplete options from my IDE, you'll see that it basically gives me the entire kitchen sink as options here. What I really want is for this list to be limited to only the options for my plugin, and for it to have knowledge about what the shape of each of those options is.
Like, is placements a string or a boolean? and should placements have only left, right, bottom, top strings available to them, and so on. ts. Let's make a few changes.
First, let me create a TypeScript interface that describes what our options should look like. One of our options, remember, is called arrow, and it should be a boolean. Another one of these options was called placement, and it should be a string. However, it's not limited to just any old string.
It needs to be one of a few particular strings. So it would be best if we used a TypeScript union to define those string options, like this. And I know there were some others, but I think you get the idea. Now, since our plugin options are all just options to pass on to Tippy, We can actually import an interface from Tippy so that we don't have to re-declare this ourselves.
And the name of that interface that Tippy exposes is props. Next, I'll make our interface extend props. That way we could add any future options here as well. This means I can remove arrow and placement here since they're already taken care of.
Perfect. My next step is to export a function called createTooltipPlugin. Starting this function with the word create is a common convention, and you'll see it fairly often when using plugins with the Composition API, Vue. Off the top of my head, I can think of two that do this, both Pina and VueRouter.
Next, I'll accept an argument to this function called options. And as you might have guessed, I'll type them as my plugin options. At this point, we're going to change how we expose our plugin from the file. So I'll cut all the code inside of my plugin here, and then remove the tooltip plugin function.
Then inside our newly added function, I'll return our plugin install function. Then I can simply paste in what I had before. ts, and make the way we import the plugin match our newly created code. We should import createTooltipPlugin now, and then when we use it, we should call createTooltipPlugin and pass it the plugin options.
Lastly, we can remove the options as the second argument to the use function. Great. This time, if I place my cursor inside of the options object and press Ctrl Spacebar, you'll see a focused and accurate list of only the options available to the plugin. And then I can just cursor down and choose the ones that I'd like to apply.
I'll set arrow to true here, and let's also set the placement. Notice that the string options here are even populated for me. Great. Now I've still got some red squiggly lines here, and if I hover over it, it says that argument of type arrow true and placement top is not assignable to the type of plugin options.
That is missing some of the following properties from props. That is animate fill, append to, area, delay, and then 39 more. Well, it seems that the props interface from tippy is requiring all of the different options. So let's just say that all of them can be optional with the partial TypeScript generic.
That does the trick. While taking the extra time on some of these added TypeScript features doesn't actually affect the functionality of the plugin itself, it can be a huge improvement for a developer experience. This lesson involves TypeScript, so if you aren't familiar with TypeScript yet, then feel free to skip it. But if you enjoy using TypeScript, then stick around.
I'm going to show you how to make your plugin options type safe. But first, be aware that I've made a few changes between this lesson and the last. ts for our plugin file. I've also included some other configuration files so that TypeScript behaves properly, and some other small details like that.
So, to best follow along with this lesson, you should use the link in the description below to get to this starting point. Alright, now onto the objective at hand. That is, making our plugin options type safe. But first, what do I mean by that exactly?
Well, right now, If I were to delete all the options that are inside here, and then press control space bar in order to open up the autocomplete options from my IDE, you'll see that it basically gives me the entire kitchen sink as options here. What I really want is for this list to be limited to only the options for my plugin, and for it to have knowledge about what the shape of each of those options is. Like, is placements a string or a boolean? and should placements have only left, right, bottom, top strings available to them, and so on.
ts. Let's make a few changes. First, let me create a TypeScript interface that describes what our options should look like. One of our options, remember, is called arrow, and it should be a boolean.
Another one of these options was called placement, and it should be a string. However, it's not limited to just any old string. It needs to be one of a few particular strings. So it would be best if we used a TypeScript union to define those string options, like this.
And I know there were some others, but I think you get the idea. Now, since our plugin options are all just options to pass on to Tippy, We can actually import an interface from Tippy so that we don't have to re-declare this ourselves. And the name of that interface that Tippy exposes is props. Next, I'll make our interface extend props.
That way we could add any future options here as well. This means I can remove arrow and placement here since they're already taken care of. Perfect. My next step is to export a function called createTooltipPlugin.
Starting this function with the word create is a common convention, and you'll see it fairly often when using plugins with the Composition API, Vue. Off the top of my head, I can think of two that do this, both Pina and VueRouter. Next, I'll accept an argument to this function called options. And as you might have guessed, I'll type them as my plugin options.
At this point, we're going to change how we expose our plugin from the file. So I'll cut all the code inside of my plugin here, and then remove the tooltip plugin function. Then inside our newly added function, I'll return our plugin install function. Then I can simply paste in what I had before.
ts, and make the way we import the plugin match our newly created code. We should import createTooltipPlugin now, and then when we use it, we should call createTooltipPlugin and pass it the plugin options. Lastly, we can remove the options as the second argument to the use function. Great.
This time, if I place my cursor inside of the options object and press Ctrl Spacebar, you'll see a focused and accurate list of only the options available to the plugin. And then I can just cursor down and choose the ones that I'd like to apply. I'll set arrow to true here, and let's also set the placement. Notice that the string options here are even populated for me.
Great. Now I've still got some red squiggly lines here, and if I hover over it, it says that argument of type arrow true and placement top is not assignable to the type of plugin options. That is missing some of the following properties from props. That is animate fill, append to, area, delay, and then 39 more.
Well, it seems that the props interface from tippy is requiring all of the different options. So let's just say that all of them can be optional with the partial TypeScript generic. That does the trick. While taking the extra time on some of these added TypeScript features doesn't actually affect the functionality of the plugin itself, it can be a huge improvement for a developer experience.