Episode 7: What is the Component Type?

Ponkichi’s Vue.js Adventure: The Day His Life Changed at the Forest Doctor’s Lab

Note

This story was translated and written with the help of generative AI, aiming to make learning frontend technology enjoyable. Every effort has been made to ensure technical and translation accuracy, but we cannot guarantee that everything is absolutely perfect. Please treat this series as a friendly learning aid, and enjoy it with an open mind!

Characters

Dr. Frontend: The wise Frontend Doctor who lives in a laboratory deep in the forest. He knows everything about frontend technology and always answers Ponkichi’s innocent questions with kindness and humor.
Ponkichi: A curious young raccoon dog who dreams of becoming a frontend engineer. He has just started learning Vue.js and is fascinated by its depth. When he discovers something new, he can’t help but jump up with a cheerful “Boing!”

Having learned that createApp is protected by strict type definitions, Ponkichi eagerly visits the lab today to unravel the mystery of the Component type—the argument passed to createApp.

Ponkichi: “Doctor! Please teach me about the Component type! It’s about those objects we always write, right?”

Dr. Frontend: “Indeed, that’s correct, Ponkichi. The Component type is the ‘blueprint’ for parts in Vue.js. It defines the ‘ideal form’ of the object where we write data, methods, computed, and other properties—that’s what the Component type is.”

The doctor displayed an example of a Component type object on the monitor.

const MyComponent = {
  props: {
    name: String
  },
  data() {
    return {
      message: 'Hello!'
    }
  },
  methods: {
    greet() {
      alert(this.message + ' ' + this.name)
    }
  },
  computed: {
    reversedName() {
      return this.name.split('').reverse().join('')
    }
  }
}

Dr. Frontend: “This object is one concrete example of the Component type. You can see it’s packed with familiar properties like props, data, and methods.”

Ponkichi: “Ah! I recognize those words—data and methods! I mostly write in the <script setup> format, so seeing everything combined into one object like this is fresh for me. But the keywords being used are similar! So these are the rules defined by the Component type!”

Dr. Frontend: “Exactly! The Component type is like a big container that defines the rules: ‘If you’re a Vue component, you’re allowed to have these kinds of properties.’”

The doctor drew the conceptual structure of the Component type on the blackboard.

// Component type concept (simplified version)
interface Component {
  props?: object | string[];
  data?: (this: ComponentPublicInstance) => object;
  methods?: { [key: string]: Function };
  computed?: { [key: string]: Function | { get: Function; set: Function } };
  setup?: (props: Props, context: SetupContext) => object | Function;
  // ...and many more!
}

Ponkichi: “Wow! Sure enough, there are lots of names I recognize like props and data! There’s setup too!”

Dr. Frontend: “That’s right. Thanks to this Component type, when we accidentally write metods instead of methods, or write data as an object instead of a function, TypeScript will tell us, ‘That violates the rules of the Component type!’”

Ponkichi: “I see! Because there’s a Component template, we can catch mistakes!”

Dr. Frontend: “Exactly. This is somewhat similar to object-oriented thinking. It’s the concept of predetermining what kind of data (properties) and what kind of behaviors (methods) a ‘thing’ (object) with a specific role should have.”

Ponkichi: “Properties and methods…?”

Dr. Frontend: “Yes. Roughly speaking, things like data that represent ‘state and information’ are properties, and functions inside methods that represent ‘actions and processing’ are methods.”

Ponkichi was deeply convinced to learn that the components he had been writing were built upon the solid foundation of the Component type definition.

Ponkichi: “So components aren’t just ordinary objects—they’re special parts that follow rules set by Vue.js! Boing!”

Dr. Frontend: “That’s right! And actually, this Component type, like the createApp type definition we saw last time, has an even deeper form that uses generics.”

Ponkichi: “What?! Those <...> things are coming up again?!”

Dr. Frontend: “Hehe. Let’s save that discussion for next time. Next time, we’ll explore the mystery of the seven mysterious parameters that the Component type possesses.”

Ponkichi: “Seven of them?! Yes, I’m curious!”

Ponkichi’s exploration is getting closer and closer to the heart of Vue.js and TypeScript.

🌟 Today’s Takeaways

The Component type is like a “blueprint” that defines the properties (data, props, etc.) that Vue components should have.
Thanks to this type, TypeScript can check for mistakes in writing components.
The “state and information” that objects have are sometimes called properties, and “actions and processing” are called methods.
The components we always write are special objects protected by the Component type.

Next Episode Preview: “Seven Mysterious Parameters”

The Component type is actually a complex type with seven generic parameters: Component<P, B, D, C, M, E, S>! Let’s uncover the identity of these mysterious letters together with Ponkichi!

👨‍🏫 Doctor’s Note

Ponkichi might be feeling a bit anxious about the “seven mysterious parameters” mentioned in the next episode preview. But don’t worry! Let me secretly reveal their identity just a little bit today.

Actually, the formal definition of the Component type looks like this:

Component<P, B, D, C, M, E, S>

These seven letters each represent important elements of Vue components:

P = Props (Properties) - Data received from the parent
B = RawBindings (Raw Bindings) - Values returned from the setup function
D = Data (Data) - Component state
C = Computed (Computed Properties) - Values calculated and derived
M = Methods (Methods) - Component behaviors
E = Emits (Events) - Messages sent to the parent
S = Slots (Slots) - Parts where content can be swapped out

The data and methods that Ponkichi has been writing are actually part of this big blueprint!

The “object properties and methods” we talked about today actually correspond to D (Data) and M (Methods). And the variables and functions that Ponkichi usually writes in <script setup> are also properly managed by this type system.

Of course, there’s no need to memorize all seven right now. As long as Ponkichi continues writing components as usual, Vue.js will handle all this complex type management behind the scenes.

Interestingly, these seven parameters were gradually added as Vue.js evolved. It started much simpler but developed into a more flexible and powerful type system to meet developers’ needs.

But someday, when Ponkichi thinks, “I want to create more complex components” or “I want to build large apps with a team,” being able to be conscious of these seven elements will help him reach the next level as a true component designer.

End of Episode 7