How to create functional component in vuejs with Typescript

Question

I want to create a functional component in vuejs with typescript. However, I'm not sure how to setup the generic part so that I can access my props. I have this so far:

import Vue, { FunctionalComponentOptions } from 'vue';

export default Vue.component<FunctionalComponentOptions>('MyWrapper', {
    functional: true,
    render: (createElement, context) => {

        if (context.props['flagSet']) {
            console.log('flagset');
        }

        return createElement('div', context.data, context.children);
    }
});

The error I get for the context.props line is Element implicitly has an 'any' type because type 'FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>>' has no index signature.

Which I'm not sure how to resolve.

jaime · Accepted Answer · 2018-11-16 19:01:53Z

5

The correct way to make this work for the code above is to pass in an interface describing the props.

interface IProps {
    flagSet: string;
}

export default Vue.component<IProps>

Looking back at the original question, I'm not sure exactly why I tried to plug in FunctionalComponentOptions as a type parameter. I blame the late night coding session. :)

answered Nov 16, 2018 at 19:01

jaime

2,3641 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create functional component in vuejs with Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related