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

項目背景, Nuxt(vue), TypeScript

生成完項目框架, 添加測試demo頁面. 

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

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

 ts編譯後控制檯報錯以下:

 

  按照如上提示, 應該是項目中nuxt對vue的擴展缺乏ts相關配置. 

  解決辦法建立nuxt.d.ts文件. 而後配置以下:

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-b