Write a Vue Component as a Class in TypeScript
Share this video with your friends
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.
The pull from the repository does not match the initial state in the video, I have created PR to fix this.
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.