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

【问题标题】：How to create functional component in vuejs with Typescript如何使用 Typescript 在 vuejs 中创建功能组件
【发布时间】：2018-11-16 05:44:29
【问题描述】：

我想用 typescript 在 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.

我不确定如何解决。

【问题讨论】：

标签： typescript vuejs2

【解决方案1】：

使上述代码工作的正确方法是传入一个描述 props 的接口。

interface IProps {
    flagSet: string;
}

export default Vue.component<IProps>

回顾最初的问题，我不确定为什么我试图插入FunctionalComponentOptions 作为类型参数。我责怪深夜的编码会议。 :)

【讨论】：