Nuxt / Vue.js in TypeScript: Object literal may only specify known properties, but 'components' does

时间 2019-11-09

标签 nuxt vue.js vue typescript object literal specify known properties components 栏目 JavaScript 繁體版

原文原文链接

项目背景, Nuxt(vue), TypeScriptvue

生成完项目框架, 添加测试demo页面. typescript

在生成的模板代码中添加layout配置以下:框架

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  layout: 'empty'
})
</script>

ts编译后控制台报错以下:async

按照如上提示, 应该是项目中nuxt对vue的扩展缺乏ts相关配置. 测试

解决办法建立nuxt.d.ts文件. 而后配置以下:fetch

import Vue, { ComponentOptions } from "vue";

declare module "vue/types/options" {
  interface ComponentOptions<
    V extends Vue,
    Data=DefaultData<V>,
    Methods=DefaultMethods<V>,
    Computed=DefaultComputed,
    PropsDef=PropsDefinition<DefaultProps>,
    Props=DefaultProps> {
    asyncData?: Function,
    fetch?: Function,
    head?: object | Function,
    layout?: string | Function,
    middleware?: string | string[],
    scrollToTop?: boolean,
    transition?: String | object | Function,
    validate?: Function,
    watchQuery?: boolean | string[]
  }
}

参考连接: https://stackoverflow.com/questions/49090240/nuxt-vue-js-in-typescript-object-literal-may-only-specify-known-properties-bspa