Write a Vue Component as a Class in TypeScript
Writing Vue components as plain objects has very limited capabilities for TypeScript’s IntelliSense. This lesson will show you how to write components as classes to take full potential of TypeScript static typing by using vue-class-component.
[00:00] We are going to use this to start the repo. You can find out how to set up TypeScript in a Vue app. Clone it, and run npm install. I've already done both. I prepared a hello component.
[00:12] In this component, you can see an internal state variable called message with a "hello vue" string, a computed full message property, which basically takes the message, and appends from TypeScript, I created hook, and a click method.
[00:30] Let's check if this is working. All right. What we are going to do now is we're going to write this component into a class-based style component. For that, we need to install vue-class-component. Let's run npm install vue-class-component.
[00:56] In the meanwhile, this is installing. Let's first import Vue. Then we also need to import component from vue-class-component. Now, in order to create a class-based component, we have to create a class. Let's write [inaudible] class hello, and we need to extend from Vue.
[01:20] For now, this is just a plain class, but we still need to tell Vue that this is a component. For that, we are going to use the component decorator. Let's just start rewriting. The component instance variables are written as normal variables.
[01:37] Let's write them as just a string here. He can get rid of the old data property. Next, computer properties are standard getters. We can write here get full message, and return that string. Remember that in getters, you always have to return something.
[02:02] Hooks are written as methods. Let's copy that, and let's remove it. As you can guess, methods are written as methods. They have some differences with hooks, but we will see that later. Let's see if this is still working.
[02:22] Run NPM run dev. All right, everything is working as before, but now, we can take advantage of TypeScript IntelliSense. If we go back and type this-dot, we can see all the properties and methods available in our component.
Excellent video series, just wondering though why vue file hot reloading isn't configured?
it is very hard to understand what he says.
I love TS but am brand new to Typescript, following along fine with your tutorial and very happy to see TS so well supported but I'd love to know if you use a template generator -- vue-cli, yo, etc. -- to frame your TS/Vue projects. I'd love to be able to just start coding at the moment but the template in your Git repo is very different from the template I found when googling.
Hi Ken, the template Vue-Typescript-Starter is exactly the same one than the official vue-cli webpack template, with the small additions explained in the article Integrate TypeScript in your Vue project
Hello,I have been using vuejs for a while now and wanted to switch to using TypeScript but just learning typescript by itself seemed a bit dull, so i really like this course. Quick question, shouldn't vue-class-component be included by default in the starter template, or can we use typescript in vue without it?
Cheers.
You can use TypeScript with plain Vue.js, there is no need for writing class based components. However, I prefer using vue-class-component since it gives you more standard and easier to understand code and fits better with TypeScript typing.
I cloned the lesson-1 branch and then can't seem to run it after. I copied and pasted in these 8 errors. Upsetting to see errors on a fresh clone! :/
ERROR Failed to compile with 8 errors 21:12:34
error in /Users/Owner/Desktop/vuejs-typescript/node_modules/vue-router/types/router.d.ts
(4,35): error TS2709: Cannot use namespace 'Vue' as a type.
error in /Users/Owner/Desktop/vuejs-typescript/node_modules/vue-router/types/router.d.ts
(13,43): error TS2709: Cannot use namespace 'Vue' as a type. error in /Users/Owner/Desktop/vuejs-typescript/node_modules/vue-router/types/router.d.ts
(19,8): error TS2709: Cannot use namespace 'Vue' as a type.
error in /Users/Owner/Desktop/vuejs-typescript/node_modules/vue-router/types/router.d.ts
(93,25): error TS2709: Cannot use namespace 'Vue' as a type.
error in /Users/Owner/Desktop/vuejs-typescript/node_modules/vue-router/types/vue.d.ts
(17,13): error TS2428: All declarations of 'ComponentOptions' must have identical type parameter s.
error in /Users/Owner/Desktop/vuejs-typescript/node_modules/vue-router/types/vue.d.ts
(17,40): error TS2709: Cannot use namespace 'Vue' as a type.
error in /Users/Owner/Desktop/vuejs-typescript/node_modules/vue/types/options.d.ts
(55,18): error TS2428: All declarations of 'ComponentOptions' must have identical type parameters.
error in /Users/Owner/Desktop/vuejs-typescript/vue-shim.d.ts
(3,18): error TS2714: The expression of an export assignment must be an identifier or qualifiedname in an ambient context.
Hey Sam, you can try this fix, it worked for me: https://github.com/alexjoverm/Egghead-Typescript-Vuejs-apps/pull/4/commits/d07e48b5ad933658ec8947930a82d4859b1ddacb?utf8=✓&diff=unified
Hi Egghead Team, can we get this course updated using Vue 3 script setup syntax and using vite?
For anyone trying to work with this today, make sure to remove the ^ symbols from the package.json file. The ^ allows for the package to update to the latest version, creating breaking changes from when the course was created.
The pull from the repository does not match the initial state in the video, I have created PR to fix this.