Which TypeScript type must be used to define a class as a prop in the script setup of Vue 3?

Question

Which TypeScript type must be used to define a class as a prop in the script setup of Vue 3?

Currently, I am working on a Vue 3 single file component that utilizes the script setup method. The challenge I am facing involves defining a prop that should accept values similar to those passed to the HTML class attribute. This means the prop could be a string, an expression, an array, or an object. However, when attempting to use withDefaults() to set a default value of an empty string to this prop, issues arise.

withDefaults(
  defineProps<{
    itemClass?: unknown
  }>(),
  {
    itemClass: '',
  }
)

This is then bound as

<div :class="itemClass">...</div>

I am striving to avoid using the type any, and have experimented with unknown without success in assigning it a default value. It appears that removing the default value altogether is a temporary workaround, although there may be scenarios where having a default value is essential.

Does anyone know if there exists a specific type tailored for the Vue class attribute?

typescript vue.js vue-sfc vue-script-setup

Answer 1

Answer №1

The class binding value can come in different types:

string

For example:
```
<div :class="myStringProp">
```
Record<string, boolean> (Object syntax)

For example:
```
<div :class="{ active: true, error: true }">
```

It can also be a mixed array of these types:

(string | Record<string, boolean>)[]

(Array syntax)

For example:

<div :class="['item', { active: true, error: true }]">

Therefore, the type for itemClass should be a union of these types:

defineProps<{
  itemClass?: string | Record<string, boolean> | (string | Record<string, boolean>)[]
}>()

Check out the demo here

Answer 2

The class binding value can come in different types:

string

For example:
```
<div :class="myStringProp">
```
Record<string, boolean> (Object syntax)

For example:
```
<div :class="{ active: true, error: true }">
```

It can also be a mixed array of these types:

(string | Record<string, boolean>)[]

(Array syntax)

For example:

<div :class="['item', { active: true, error: true }]">

Therefore, the type for itemClass should be a union of these types:

defineProps<{
  itemClass?: string | Record<string, boolean> | (string | Record<string, boolean>)[]
}>()

Check out the demo here

Answer 3

Answer №2

In my Vue 3.2.39 project, I am implementing the following code snippet:

  import { HTMLAttributes } from "vue";

  const properties = defineProps<{
    style?: HTMLAttributes["style"];
  }>();

However, it still remains as any. Hopefully, Vue will introduce proper typing support in the near future.

Answer 4

In my Vue 3.2.39 project, I am implementing the following code snippet:

  import { HTMLAttributes } from "vue";

  const properties = defineProps<{
    style?: HTMLAttributes["style"];
  }>();

However, it still remains as any. Hopefully, Vue will introduce proper typing support in the near future.

Which TypeScript type must be used to define a class as a prop in the script setup of Vue 3?

Answer №1

Answer №2

Similar questions

Implementing HTTP GET and POST requests in Angular 2 allows for the functionality of displaying, adding, and deleting objects within a list

Navigating through pop-ups in Chrome: A guide to using Protractor

What is the process for building a reusable component from a static component in Vue 3?

Required Ionic form field alert

Retrieve user roles from core in Angular prior to implementing a guard

Creating a global component in Angular 2: A step-by-step guide

Angular - Evaluating the differences between the object model and the original model value within the view

What is the best way to set up my page to detect the "enter" key input when the form is not created with the <form> tag?

How to use Vue to eliminate text from a title within an array

Javascript/Typescript Performance Evaluation

Exploring the use of properties in JavaScript

Understanding the Relationship Between Interfaces and Classes in Typescript

The union type consisting of String, Boolean, and Number in type-graphql has encountered an error

The challenges of dealing with duplicate identifiers caused by nesting npm packages in TypeScript

Navigating through pages. Learning to jump between different sections by simply clicking on numbers

Issue: The configuration for the rule "no-empty-interface" in .eslintrc.js is not valid

The use of findDOMNode has been marked as outdated in StrictMode. Specifically, findDOMNode was utilized with an instance of Transition (generated by MUI Backdrop) that is contained

What does Firefox need in order to fully support Vue.js debugging in PhpStorm?

Error message: "Vue3 JSX files are throwing a ReferenceError because React is not defined."

Creating a specialized optional map with a typed object containing a field that is strongly defined