While using the Composition API is the most flexible approach to working with TypeScript in Vue, you can also use TypeScript with the Options API. Let's briefly examine how to do that in this lesson. If you open up the DateDisplay component, which is responsible for displaying the createdAtDate on the entry cards, you'll see that it's already written in the Options API. The first thing that you probably notice when opening up this file is that the laying attribute on the script tag is still required.
It should be set to ts. Next, you'll probably notice this curious new function called on the exported options object called defineComponent. This function allows TypeScript to properly infer types for the component options. Do take note, though, that you must import this function first to use it.
Unlike define emits and define props, define component is not a macro meant only for the compiler. Okay, with define component in place, let's add a mounted lifecycle hook and examine some of the inferred types of our props in computed props. I'll start with the date prop. date.
we can see that it's been typed based on what was provided in the prompt's definition. What if the date needed to be a more custom type though, like our entry interface? As we saw earlier, we absolutely cannot provide a TypeScript interface to a runtime declaration for prompts. Instead, what we can do is type the prop as an object, and then use the prop type utility to be more specific.
And now we'll need to import prop type from view. Cool. date in the mounted function, it is typed as we specified as an entry. And in the computed prop, we get an error because the format relative function from the awesome date functions library expects a date or a number.
All right, let's take the date prop back to a proper date. Next. Let's take a look at the computed props. If you hover over formatted, you can see that it's a function that returns a string, and that is spot on.
The string that's returned here is the string like you see on the card that says something like today at such and such a time. If we now access formatted in the mounted function and hover over it, you can see that it's also a string. That's exactly right. Lastly, We could even hover over Formatted in the template, and it's typed correctly too.
Lastly, if you'd like to explicitly type a computed prop, you can do that by typing the function's return. Besides props and computed props, we can also define types for our component's events, using the Emits option and its object syntax. In this object, Each event is a function, and its argument is the event payload. Now, typing the payload works just like typing any other function argument.
Plus, if you needed to perform any runtime validations, you could also do that in this function. Or, if you only care about the build time validations with TypeScript, you could just return true here. View, If we were to listen to that do-something event that we just created on the DateDisplay component, you can see that the event is indeed in the list of autocomplete options, and the payload is correctly typed. Cool.
Let's just remove that now. View, I'll clean things up as well. I'll remove the unused event with the emits option and the unused bit here in the mounted hook. And lastly, I'll remove the unused imported types.
In conclusion, if you prefer the options API over the composition API, then you can definitely still benefit from using TypeScript.