Vue: Typescript not working only in App.vue

Viewed 2660

So, I created a vue app with vue CLI to be using it with typescript... and everything worked fine... all my components work fine with typescript... even main.ts works well...

the problem is if I try to use typescript in my App.vue file tough, I get a SyntaxError... super weird, coz I never had this problem before and typescript works fine in my other projects.... I cannot figure out, why it is not working.... even a simple thing like this:

<template src="./App.html"></template>

<script>
import { Component, Vue } from "vue-property-decorator";

@Component()
export default class App extends Vue {
  a: string = "";
  mounted() {}
}
</script>

produces

SyntaxError: C:\DEVELOPMENT\app\src\App.vue: Unexpected token (9:3)

   7 | @Component()
   8 | export default class App extends Vue {
>  9 |   a: string = "";
     |    ^
  10 |   mounted() {}
  11 | }
  12 | 

Obviously if I remove :string part all works well...

my tsconfig file is pretty standard, haven't done any changes to that part.... and the App.vue is places as it should be, root of src folder

my tsconfig

   {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "types": [
      "node"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "es2015",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.scss",
    "src/**/*.html",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

so can somebody tell me what might be going on?

1 Answers

To use TypeScript inside a Vue component, you will need to specify the language inside the script tag like this:

<script lang="ts">

Without the lang attribute Vue assumes your component is JavaScript, so TypeScript seems invalid to it.

Related