TypeScript compile error

The .vue file:

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  head: {
    title() {
      return {
        inner: this.title
      }
    }
  },
})
export default class ProductList extends Vue {
  title: 'xxx’
}

The error:

Argument of type '{ head: { title(): { inner: any; }; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
  Object literal may only specify known properties, and 'head' does not exist in type 'VueClass<Vue>'.

And the error result in the failure of TypeScript compilation.

[NateScarlet]

You can add declaration file youself Example:

types/vue-head/index.d.ts

declare module 'vue-head' {
  import { PluginObject } from 'vue'
  const VueHead: PluginObject<{}>
  export = VueHead
}

types/vue-head/options.d.ts

import Vue from 'vue'

declare module 'vue/types/options' {
  interface TitleOptions {
    inner?: string
    separator?: string
    complement?: string
  }
  interface ComponentOptions<V extends Vue> {
    head?: {
      title?: TitleOptions | (() => TitleOptions)
      meta?: any[]
      link?: any[]
      script?: any[]
      style?: any[]
    }
  }
}

[NateScarlet]

@jamiecarter7

Set generic type of Component to your component like @Component<ProjectHome> to give type information to Component declarator

@Component<ProjectHome>({
  components: { ProjectTable },
  head: {
    title() {
      return {
        inner: this.foo,
      };
    },
  },
})
export default class ProjectHome extends Vue {
  foo = 'bar'
}