CODEWITHSUNDEEP
typescriptvuejs2
jaime
jaime

Reputation: 2334

How to create functional component in vuejs with Typescript

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.

Upvotes: 4

Views: 3060

Answers (1)

jaime
jaime

Reputation: 2334

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. :)

Upvotes: 5

Related Questions