Question

因此，我使用vue CLI创建了一个vue应用程序，以便将它与打字稿一起使用...一切正常...我的所有组件都与打字稿一起工作...甚至main.ts都可以正常工作...

问题是，如果我尝试在我的App.vue文件中使用打字稿，我会遇到SyntaxError ...超级奇怪，因为我以前从未遇到过此问题，而打字稿在其他项目中也能正常工作。无法弄清楚为什么它不起作用....甚至是一个简单的事情，像这样：

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

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

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

产生

SyntaxError：C：\ DEVELOPMENT \ app \ src \ App.vue：意外令牌（9：3）

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

很明显，如果我删除：string部分，一切正常...

我的tsconfig文件是非常标准的文件，尚未对该部分进行任何更改。...而App.vue正是应有的位置，是src文件夹的根

我的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"
  ]
}

所以有人可以告诉我发生了什么事吗？

Answer 1

要在Vue组件中使用TypeScript，您将需要在script标签内指定语言，如下所示：

<script lang="ts">

没有lang属性，Vue假定您的组件是JavaScript，因此TypeScript对其无效。

Vue：Typescript仅在App.vue中不起作用

1 个答案: