So I have a fresh Vite app here. So we'll make use of this to use TypeScript. So we'll go into the HelloWorld component. And the first thing we're going to do is switch this to the composition API. But this still works for the options API. So let me change this real quick. I'm going to make it a method. And let's remove the data and make a setup method. And let's return some stuff. And I'm going to make a ref for count.

And let's return some stuff. And I'm going to make a ref for count. And let's set it to 0 by default. Actually, let me import this. And let's return count. Let's make that increment method. And let's say count.value++. OK, let's double check that this still works. Forgot to return the increment method. OK, try again.

Forgot to return the increment method. OK, try again. OK, cool. So the first step is to switch the language to TypeScript. So we can do lang="ts" for TypeScript. And we also want to wrap our entire component in a defineComponent method. And this method allows us to infer our types when using TypeScript. So let's grab defineComponent from vue. OK, and when we export default, let's wrap this in defineComponent and close it out down here.

OK, and when we export default, let's wrap this in defined component and close it out down here. And that should be it. We should be able to use TypeScript now. So if I were to say add a return type to this method over here, this should work. So let's say void because it's not returning anything. And let's see if the app still works. It does. Cool. So for our state, we are either going to be using ref or reactive.

is type checking within your template. So if I were to do this in my template somewhere up here, let's just put it within a div here and put the curly braces and call that function. So obviously this should work. If I were to return pow down here, it should be eight. Okay. But if I were to pass it incorrect arguments here, there is no type checking in templates. So this will not get through TypeScript. So yeah, I'm not sure if there is a way to do type checking within the template. And obviously these should be divs, sorry.

So yeah, I'm not sure if there is a way to do type checking within the template. And obviously these should be divs, sorry. And this is just going to result in an error or not a number. Okay. Let's take a look at using reactive. Remember, reactive takes an object as a param. So typing it is the same way we type objects in TypeScript. So we would define an interface. So let's make some state first using reactive. So we would do something like const state = reactive.

So let's make some state first using reactive. So we would do something like const state = reactive. And let me import that. And then we will have an object with our different pieces of state here. So let's just say title. And let's make that an empty string. And let's add a year and say 2020. Okay. So like I said, we have to make an interface and type each field separately. So let's do that.

So like I said, we have to make an interface and type each field separately. So let's do that. So let's say interface, let's call it State. And let's have a title, that's going to be a string. And a year is a number. And now we can type our state here. Let's set our state to type State. And this should work. So for example, if I were to give year a string, you'll see that we get the error here.

So for example, if I were to give year a string, you'll see that we get the error here. And I believe you can also define it like this. So in angle brackets after reactive here, and we get the same error. Cool. So let me put that back to a number. And let's add one more piece of state here. So I'm going to go back to my state interface, and I'm going to add a todos array.

So I'm going to go back to my State interface, and I'm going to add a todos array. So let's say todos. And that's going to be of type Todo. And that's going to be an array. So we have to make another interface for Todo, which defines the shape of a Todo object. So let's do that interface Todo. And a Todo will have a name, that's going to be a string. And it will have an isComplete boolean.

And a ToDo will have a name, that's going to be a string. And it will have an isComplete boolean. Okay. And now you see this complaining here because it doesn't have the toDo's field here. And you can make this optional as well. If you do that, that error should disappear. It does, but let's make it required. And now we have to add a toDo's array here so we can do that toDo's.

And now we have to add a todos array here so we can do that todos. And let's say first one is name finish screencast and isComplete false since I'm still doing it. And I forgot the comma and let's add one more. Let's say goToStore false. So this should be checked too. For example, if I didn't have the isComplete field, it will notify me. There's the error there.

And now we have to change this script in the index.html. So change that. But if you saw this error here, you'll see it's saying it can't find the module. So this has to do with a shim file. And a shim file helps your IDE or your editor understand what a .vue file is in our case here. So I think the shim file is added in Vue CLI. And let's go ahead and add it here. So I'm going to add a shims-vue-t.ts file.

And let's go ahead and add it here. So I'm going to add a shims-vue.d.ts file. But the one included in Vue CLI is an older version. And the version that works with Vue 3 is slightly different. So I've seen multiple versions floating around. But the one I'm going to use is the one from the Vue Router. So if you go into the GitHub repo and go to Playground, there should be a shims file in here. So there it is. And I'm going to copy this and paste it in here in our shim file.