How can I use TypeScript to wrap a component in Vue 3?

Question

How can I use TypeScript to wrap a component in Vue 3?

Looking to customize a PrimeVue component (Calendar) by styling it differently and then re-exporting it.

Here's an example in React:

const WrappedCalendar: React.FC<CalendarProps> = (props)=> 
<div style={{background:'green'}}>
    <Calendar {...props}/>
</div>

Struggling with constant TypeScript errors while attempting this. Even tried extending from PrimeVue's Calendar, which also didn't work out.

Below is a simple attempt that isn't cooperating with TypeScript and exhibiting unexpected behavior:

<script setup lang="ts">
import Calendar, { CalendarProps, CalendarSlots } from 'primevue/calendar';
import { defineProps, h, } from 'vue'

const props = defineProps<CalendarProps>()
const slots = defineSlots<CalendarSlots>() 
const CalendarFC = () => {
  return h(Calendar, props, slots)
}
</script>
<template>
  <div :style="{ background: 'green' }">
      <CalendarFC></CalendarFC>
  </div>
</template>

Is there a simpler way to wrap a component while maintaining the same props / emits / slots as the original one and keeping TypeScript in line?

typescript vue.js vuejs3 vue-composition-api primevue

Answer 1

Answer №1

After testing the code snippet provided, it appears to be functioning correctly. If there are any issues, they could potentially be linked to PrimeVue.

Alternatively, utilizing JSX/TSX might offer a more convenient approach for this particular task. For more detailed information, refer to the official Vue.js documentation.

TestChild.vue

<template>
  <div>
    {{ testProp }}
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { defineSlots, defineProps } from 'vue';
import type { Props, Slots } from './shared.type.ts';

defineProps<Props>();
defineSlots<Slots>();
</script>

shared.type.ts

export interface Props {
  testProp: string;
}
export interface Slots {
  default(): any;
}

TestParent.vue

<template>
  <TestChildWrap />
</template>

<script setup lang="ts">
import { defineSlots, defineProps, h } from 'vue';
import TestChild from './TestChild.vue';
import type { Props, Slots } from './shared.type.ts';

const props = defineProps<Props>();
const slots = defineSlots<Slots>();

const TestChildWrap = () => {
  return h(TestChild, { ...props }, slots);
};
</script>

Answer 2

After testing the code snippet provided, it appears to be functioning correctly. If there are any issues, they could potentially be linked to PrimeVue.

Alternatively, utilizing JSX/TSX might offer a more convenient approach for this particular task. For more detailed information, refer to the official Vue.js documentation.

TestChild.vue

<template>
  <div>
    {{ testProp }}
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { defineSlots, defineProps } from 'vue';
import type { Props, Slots } from './shared.type.ts';

defineProps<Props>();
defineSlots<Slots>();
</script>

shared.type.ts

export interface Props {
  testProp: string;
}
export interface Slots {
  default(): any;
}

TestParent.vue

<template>
  <TestChildWrap />
</template>

<script setup lang="ts">
import { defineSlots, defineProps, h } from 'vue';
import TestChild from './TestChild.vue';
import type { Props, Slots } from './shared.type.ts';

const props = defineProps<Props>();
const slots = defineSlots<Slots>();

const TestChildWrap = () => {
  return h(TestChild, { ...props }, slots);
};
</script>

How can I use TypeScript to wrap a component in Vue 3?

Answer №1

Similar questions

Using Systemjs to transpile TypeScript async functions

Error: Unable to access unknown properties (reading 'extend')

Encountering a TypeScript error while trying to pass the myDecorator function as a decorate prop to React

Exploring Nuxt's Getters with vuex-class for seamless data retrieval

What is the method for dynamically invoking computed props in templates?

Similar to TypeScript's `hasOwnProperty` counterpart

What is the best way to utilize a reduce function to eliminate the need for looping through an object in JavaScript?

Typescript-optimized Npm library utilizing the module-alias feature

Omit the readme.md file from Vuepress

Eliminate using a confirmation popup

Error: The type '{ children: Element[]; className: string; }' cannot be assigned to the type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

Sharing properties between components

How can I retrieve the value from the input field using vue.js?

What is the best approach for filtering a nested array in this scenario?

Creating a custom `onSubmit` function with Formik, TypeScript, and hooks can be a powerful way

Encountering an error with Vue and Django Rest Framework that reads "Cannot read property 'title' of null" while using LimitOffsetPagination

Decrease initial loading time for Ionic 3

Securing the communication with encrypted API request payloads and responses

Load Vue: Include jQuery globally for all components

How can debugging in Chrome be achieved using Typescript?