Vue: Typescript not working only in App.vue

Question

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?

Don't you need to specify the lang inside the script tag, like <script lang="ts">? — Lassi Uosukainen
– Lassi Uosukainen, Commented Oct 9, 2019 at 9:55
@LassiUosukainen omg, I knew I was missing something painfully obvious... gosh.... thanks, great catch.... so embarrassing :) — Demiro-FE-Architect
– Demiro-FE-Architect, Commented Oct 9, 2019 at 10:00

Lassi Uosukainen · Accepted Answer · 2019-10-09 10:08:41Z

7

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.

answered Oct 9, 2019 at 10:08

Lassi Uosukainen

1,68815 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Vue: Typescript not working only in App.vue

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