Vue：Typescript 不仅在 App.vue 中工作

Question

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

问题是如果我尝试在我的 App.vue 文件中使用 typescript，我会得到一个 SyntaxError ......超级奇怪，因为我以前从未遇到过这个问题，并且 typescript 在我的其他项目中运行良好......我无法弄清楚，为什么它不起作用......即使是这样简单的事情：

<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 lang="ts">

如果没有 lang 属性，Vue 会假设你的组件是 JavaScript，所以 TypeScript 对它来说似乎是无效的。