Write a Vue Component as a Class in TypeScript

Share this video with your friends

Send Tweet

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.

~ 7 years ago

The pull from the repository does not match the initial state in the video, I have created PR to fix this.

David
David
~ 7 years ago

Excellent video series, just wondering though why vue file hot reloading isn't configured?

Alex Jover Morales
Alex Jover Morales(instructor)
~ 7 years ago
Victor Hazbun
Victor Hazbun
~ 7 years ago

it is very hard to understand what he says.

Ken Snyder
Ken Snyder
~ 7 years ago

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.

Alex Jover Morales
Alex Jover Morales(instructor)
~ 7 years ago

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

kevin-DL
kevin-DL
~ 7 years ago

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.

kevin-DL
kevin-DL
~ 7 years ago
Alex Jover Morales
Alex Jover Morales(instructor)
~ 7 years ago

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.

Sam McCagg
Sam McCagg
~ 7 years ago

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.

Olga Skurativska
Olga Skurativska
~ 6 years ago

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

Mohammed Zeeshan
Mohammed Zeeshan
~ 3 years ago

Hi Egghead Team, can we get this course updated using Vue 3 script setup syntax and using vite?

Brandon Aaskov
Brandon Aaskov
~ 3 years ago

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.