TypeScript-powered Renderless Vue Component

Question

TypeScript-powered Renderless Vue Component

I am currently facing issues converting a renderless component in JavaScript to TypeScript. The problem arises when declaring the render function within a Vue.extend-ed component:

(method) ComponentOptions<Vue, unknown, unknown, unknown, never[], Record<never, any>>.render?(createElement: CreateElement, hack: RenderContext<Record<never, any>>): VNode
  No overload matches this call.
  The last overload gave the following error.
  Argument of type '{ render(): void; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
    Types of property 'render' are incompatible.
      Type '() => void' is not assignable to type '(createElement: CreateElement, hack: RenderContext<Record<string, any>>) => VNode'.
        Type 'void' is not assignable to type 'VNode'.ts(2769)
        vue.d.ts(90, 3): The last overload is declared here.

Below is an example of my TypeScript code snippet that is causing the issue:

import Vue from 'vue'

export default Vue.extend({
  render() { // error occurs at this point. I attempted to type the render with :VNode
             // and tried returning this.$scopedSlots.default({}), but the error persists
  }
})

Is there a solution to resolve this issue?

typescript vue.js vuejs2 vue-component renderless-component

Answer 1

Answer №1

render() is defined with the following signature:

render?(createElement: CreateElement, hack: RenderContext<Props>): VNode;

Points to remember when declaring render():

The parameter hack does not need to be specified in your code
Declaring arguments is unnecessary in a renderless function
The return type should be VNode (representing a single root node), but Vue actually accepts VNode[] as a return value (such as what this.$scopedSlots.default() returns)

Option 1: Define the return type as VNode, and return a single node that encloses this.$scopedSlots.default():

import Vue, { VNode, CreateElement } from 'vue'

export default Vue.extend({
  render(h: CreateElement): VNode {
    return h('div', this.$scopedSlots.default!({}))
  }
})

Option 2: Utilize any type assertion on this.$scopedSlots.default() to bypass the type error:

import Vue from 'vue'

export default Vue.extend({
  render() {
    // Since the container node is expected to provide a single root,
    // returning `VNode[]` as any is acceptable.
    return this.$scopedSlots.default!({}) as any
  }
})

Answer 2

render() is defined with the following signature:

render?(createElement: CreateElement, hack: RenderContext<Props>): VNode;

Points to remember when declaring render():

The parameter hack does not need to be specified in your code
Declaring arguments is unnecessary in a renderless function
The return type should be VNode (representing a single root node), but Vue actually accepts VNode[] as a return value (such as what this.$scopedSlots.default() returns)

Option 1: Define the return type as VNode, and return a single node that encloses this.$scopedSlots.default():

import Vue, { VNode, CreateElement } from 'vue'

export default Vue.extend({
  render(h: CreateElement): VNode {
    return h('div', this.$scopedSlots.default!({}))
  }
})

Option 2: Utilize any type assertion on this.$scopedSlots.default() to bypass the type error:

import Vue from 'vue'

export default Vue.extend({
  render() {
    // Since the container node is expected to provide a single root,
    // returning `VNode[]` as any is acceptable.
    return this.$scopedSlots.default!({}) as any
  }
})

TypeScript-powered Renderless Vue Component

Answer №1

Similar questions

The data type 'string | null | undefined' cannot be assigned to the data type 'string | undefined'

Validating Users with OpenID in Vue.js

"Every time you use Firebase storage, you can expect a

What is the best way to define the type of an object in TypeScript when passing it to a function

"Join us for a hands-on workshop focused on mastering unit testing in

Interacting with a Hapi JS API through a distinct Vue JS Frontend. The data in request.payload is not defined

Generate dynamic modules components

Setting up a React state with an Object using Typescript: A step-by-step guide

Best practices for setting up Vuex state for efficient API usage

An error in Typescript is indicating that a semicolon is expected. The identifier 'EventNameString' is currently being used as a value, even though it only refers to a type

Set the :value for a specific member in an array or object within a Vue 3 - Vuetify input component

Error occurred while attempting to cast the query selector result to an HTMLElement within the <script lang="ts"> section of a vue component

hiding html elements by using the display property set to none instead of physically removing

Top Vue modular architecture internationalization tool

What do you call this type of input with two handles?

Radio buttons with multiple levels

Retrieve new data upon each screen entry

Guide on setting up JSME, a chemistry portal integrated with JavaScript, within vuejs

Tips for Selecting an Object within an Object in a v-for Loop

Exploring the use of properties in JavaScript