如何使用Typescript在vuejs中创建功能组件

时间:2018-11-16 05:44:29

标签: typescript vuejs2

我想用打字稿在vuejs中创建一个功能组件。但是,我不确定如何设置通用部分,以便可以访问我的道具。到目前为止,我已经知道了:

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);
    }
});

我为context.props行获得的错误是 Element implicitly has an 'any' type because type 'FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>>' has no index signature.

我不确定该如何解决。

1 个答案:

答案 0 :(得分:1)

使上述代码起作用的正确方法是传入描述道具的接口。

interface IProps {
    flagSet: string;
}

export default Vue.component<IProps>

回头看最初的问题,我不确定为什么我尝试插入FunctionalComponentOptions作为类型参数。我归咎于深夜编码会议。 :)