question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeScript compile error

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
NateScarletcommented, Dec 18, 2018

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[]
    }
  }
}
0reactions
NateScarletcommented, Jan 25, 2019

@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'
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Detect JavaScript errors during compile time using TypeScript ...
We all know that TypeScript is a language that compile itself to JavaScript. During compile-time TypeScript can emit errors to a terminal, ...
Read more >
TypeScript compile error due to typings - Stack Overflow
I'm using typescript 1.7.5, typings 0.6.9 and angular 2.0.0-beta.0. How can I get rid of the typescript compile error messages Duplicate ...
Read more >
Understanding TypeScript Errors for Beginners
Another common mistake amongst TypeScript beginners is to assume that because there are no compile-time errors there will be no run-time errors.
Read more >
Avoid TypeScript errors in your project by using the TypeScript ...
No more unexpected type errors! ... Avoid TypeScript errors in your project by using the TypeScript compiler.
Read more >
TypeScript tool window | WebStorm Documentation - JetBrains
Compile Errors  ... The tool window shows up only after you first compile your TypeScript code manually. This can be done in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found