Extend Vue Components in TypeScript

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

[00:02] We will start from this simple component, which has a message variable and a click method. Now, let's create a parent TS component. We need to import Vue and component. Notice that we are creating a TypeScript file, not a Vue file. That's because we are only reusing logic, not CSS or the template.

[00:28] As you saw, let's write the component decorator here, and let's put the class in order to create the parent component. Now, we are going to create a parent click method with a console.log() in it. Then we'll see parent clicked in the console.

[00:53] Now, we are going to use it in the hello component. First, let's import parent. Then we need to stem from it instead of Vue. Next, we are going to create a button. We will call the parent method from it. Let's check out if this is working. Click, and we can see clicked in the console, and parent click. Both methods are working.

[01:31] Now, let's see what happens if we write a click method in the parent, which exists in the child hello component as well. Run this again. We see that only the child click method is triggered. The one from the parent is not.

[01:53] You must know that vue-class-component uses the default Vue merging strategy. For example, you cannot use super keyword here. What is happening under the hood is vue-class-component is transforming these classes to objects, and the methods are merged from children to parent, so it gets overwritten.

[02:13] Let's see how would that work with instance variables. We have already a message variable in the child hello component. Let's write another in the parent, "hey from parent." Let's see what happens here.

[02:24] You can see that the child message is shown, but if we comment it out, then the parent message is shown. Here, it is happening the same as method. The child instance variables overwrite parent ones. Now, let's see how that works for hooks.

[02:40] Let's write a created hook in the parent, parent-created. Let's create another one in the hello child component. We'll say child-created. Now, if we run it, they both are called. In contrast to variables or methods, hooks are triggered all from parent to child.

Tobias Goulden Schultz
Tobias Goulden Schultz
~ 4 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
~ 4 years ago

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

Alex Jover Morales
Alex Jover Moralesinstructor
~ 4 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.

文刀三授
文刀三授
~ 4 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.
文刀三授
文刀三授
~ 4 years ago

a duplicate comment, sorry.

文刀三授
文刀三授
~ 4 years ago

a duplicate comment, sorry.

文刀三授
文刀三授
~ 4 years ago

a duplicate comment, sorry.