Extend Vue Components in TypeScript

Share this video with your friends

Send Tweet

This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. It will take you through extending a component, its properties and methods, and how hooks are triggered along the inheritance tree.

Tobias Goulden Schultz
Tobias Goulden Schultz
~ 7 years ago

I'm getting these issues with the boilerplate

error TS2304: Cannot find name 'Vue'.
error TS2428: All declarations of 'ComponentOptions' must have identical type parameters.
error TS2714: The expression of an export assignment must be an identifier or qualified name in an ambient context.
Tobias Goulden Schultz
Tobias Goulden Schultz
~ 7 years ago

Also, after Vue 2.5 with added typescript support- is this tutorial still the best approach?

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

Hi Tobias, I've just cloned and run the repo and it seems to work correctly, could you open an issue in the repo with detailed steps to reproduce?

Vue 2.5 added excellent support for using TypeScript in the traditional-style Vue components. Writing class-based components is a valid option and it allows to write Vue components logic in a more standard way.

文刀三授
文刀三授
~ 7 years ago

there are some warning in Parent.ts when i coding by use vscode.

(alias) Component<Vue>(options: ComponentOptions<Vue, object | ((this: Vue) => object), {
    [key: string]: (this: Vue, ...args: any[]) =>
Argument of type 'typeof Parent' is not assignable to parameter of type 'VueClass<Vue>'.
  Type 'typeof Parent' is not assignable to type 'new (...args: any[]) => Vue'.
    Type 'Parent' is not assignable to type 'Vue'.
      Property '$el' is missing in type 'Parent'.

import Vue
[ts] Base constructor return type 'CombinedVueInstance<Vue, Data, Methods, Computed, Record<PropNames, any>>' is not a class or interface type.
文刀三授
文刀三授
~ 7 years ago

a duplicate comment, sorry.

文刀三授
文刀三授
~ 7 years ago

a duplicate comment, sorry.

文刀三授
文刀三授
~ 7 years ago

a duplicate comment, sorry.