Using Generics in Vue components

I recently learned about a feature of Vue framework that was added already some time ago but I have not heard about it that much even though in my opinion it is an amazing improvement to the already great reusability system.

I am talking about the concept of using Generics in Vue components. Generics are part of my everyday work in TypeScript so when I learned that this feature is available in Vue, I instantly wanted to try it.

In this article, I would like to introduce you to this topic so that you can start using it in your projects.

Enjoy!

🤔 What are TypeScript Generics?

TypeScript generics are a powerful feature that allows you to define functions, classes, and interfaces that work with a variety of types while maintaining type safety. Generics enable you to create reusable and flexible components by using type variables, which act as placeholders for the actual data types that will be used later.

Key Concepts

• Type Variables: Generics use type variables (e.g., T, U, K, etc.) to represent types. These variables are specified when the function, class, or interface is used.
• Type Inference: TypeScript often infers the type based on the arguments provided, reducing the need to explicitly specify the generic type.
• Constraints: You can constrain a generic type to ensure it adheres to a certain structure (e.g., extends).

The easiest example of a generic can be a function that accepts parameters with different types:

function identity<T>(value: T): T {
    return value;
}

// Usage
const numberValue = identity<number>(42); // Explicitly specify the type
const stringValue = identity("Hello"); // TypeScript infers the type

But generics work also with classes and interfaces.

Apart from allowing different types, we can also constrain them to match certain criteria like following:

function printLength<T extends { length: number }>(item: T): void {
    console.log(item.length);
}

// Usage
printLength("Hello"); // Works because strings have a length property
printLength([1, 2, 3]); // Works because arrays have a length property

Generics are essential for building scalable and robust TypeScript applications, especially when working with collections or APIs that handle various data types.

🟢 Using Generics in Vue components

In Vue.js, generics are used to enhance type safety and flexibility when working with TypeScript. Generics allow Vue developers to define reusable and type-safe components that can accept props of varying types.

There is a great article showcasing how you can use this concept with Headless UI library here.

Generic type parameters can be declared using the generic attribute on the <script> tag:

<script setup lang="ts" generic="T">
defineProps<{
  items: T[]
  selected: T
}>()
</script>

The value of generic works exactly the same as the parameter list between <...> in TypeScript. For example, you can use multiple parameters, extends constraints, default types, and reference imported types:

<script
  setup
  lang="ts"
  generic="T extends string | number, U extends Item"
>
import type { Item } from './types'
defineProps<{
  id: T
  list: U[]
}>()
</script>

Check out official documentation for more details here.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned how to use Generics in Vue components.

Take care and see you next time!

And happy coding as always 🖥️