The first thing you'll notice in your day-to-day interaction with TypeScript in Vue is that you must let your single file components know that you plan to work with TypeScript. You can do that by providing the laying attribute on your script tag and giving it a value of ts. vue. Also, notice that I've opted to use script setup.
Script setup. is the most TypeScript friendly way of interacting with Vue. Plus, it's the cleanest and least verbose way to work with the Composition API. Now we can do something TypeScripty, like declare a function with typed params.
Then, if we try to call sum with an argument that isn't a number, VS Code calls us out for it with a red squiggly line. And when we hover over it, we're told exactly what's wrong. Argument of type string is not assignable to parameter of type number. Cool.
Let's just fix that. Also, if we hover over where we call sum here, it shows us the definition of sum, the types of arguments it expects, and the type of the return value. While this isn't super useful with the function defined just above where it's called, Imagine if some was defined in a completely different file. It would be super handy to have this information right here in line where we need it.
Awesome. So now we're cooking with TypeScript in single file components. I'll remove that example function as it's not needed going forward. And in the next lesson, let's start typing reactive data.