Vue + Typescript - invalid types

Question

Using typescript 2.8.3, ts-loader 3.5.0 (due to usage of webpack 2) and vue 2.5.16 I'm getting an error when trying to define components in a SFC like the following:

<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
     name: 'TestComponent',

     props: {
       options: {
          type: Array,
          default: () => [],
       }
     },

     computed: {
       getOptions() {
          return this.options
       },
     }
  })
</script>

Here's the error:

TS2339: Property 'options' does not exist on type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition

Here's the tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noImplicitAny": false,
    "baseUrl": ".",
    "allowJs": true,
    "paths": {
      "test/*": ["test/*"]
    },
    "lib": ["dom", "es2016"],
    "types": ["node", "jest"]
  },
  "include": ["resources/assets/js/**/*.ts", "resources/assets/js/**/*.vue"],
  "exclude": ["node_modules"]
}

Any ideas? Works ok if I set "noImplicityThis": false but autocomplete on VSCode is not correct.

You're missing a closing semicolon for the options object definition — thanksd
– thanksd, Commented May 29, 2018 at 13:41

Rui Martins · Accepted Answer · 2018-05-30 14:35:02Z

1

Somehow started working. Changed tsconfig.json to the following:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitAny": false,
    "jsx": "preserve",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "allowJs": true,
    "lib": ["dom", "esnext"],
    "types": ["node", "jest"]
  },
  "include": ["resources/assets/js/**/*.ts", "resources/assets/js/**/*.vue"],
  "exclude": ["node_modules"]
}

And vue.d.ts to:

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

Maybe it's useful for someone.

answered May 30, 2018 at 14:35

Rui Martins

515 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue + Typescript - invalid types

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related