專案背景, 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