typescript - Nuxt 打字稿 | 如何在页面组件中使用phosphor-vue组件

Question

在js中，完美运行

<template>
    <footer class="d-flex align-items-center text-right mt-auto px-14 py-4">
        <PhCopyright :size="16" class="ml-auto mr-2" />
        <span style="font-size: 14px">2021 Something</span>
    </footer>
</template>

<script>
import { PhCopyright } from "phosphor-vue";
export default {
    name: "Footer",
    components: {
        PhCopyright,
    },
};
</script>

但是在ts中，它不起作用

<template>
    <footer class="d-flex align-items-center text-right mt-auto px-14 py-4">
        <PhCopyright :size="16" class="ml-auto mr-2" />
        <span style="font-size: 14px">2021 Something</span>
    </footer>
</template>

<script lang="ts">
import Vue from 'vue'
import PhCopyright from "phosphor-vue";

export default Vue.extend({
    name: "Footer",
    components: {
        PhCopyright, <---- error here, more error details below
    }
})
</script>

错误详情

没有重载匹配此调用。最后一个重载给出了以下错误。输入'{安装：InstallFunction; }' 不可分配给类型 'Component<any, any, any, any> | AsyncComponent<任何，任何，任何，任何>'。输入'{安装：InstallFunction; }' 不可分配给类型 'AsyncComponentFactory<any, any, any, any>'。输入'{安装：InstallFunction; }' 不匹配签名 '(): { component: Promise<ImportedComponent<any, any, any, any>>; loading?: ImportedComponent<DefaultData, DefaultMethods, DefaultComputed, DefaultProps> | 不明确的; 错误？：ImportedComponent<...> | 不明确的; 延迟？：数字 | 不明确的; 超时？：数字 | 不明确的; }'

那么，我应该在这里做什么？非常感谢大家！

标签： typescriptnuxt.js