无故获取解析错误 Typescript, Vue, vue-property-decorator, VSCode答案

【问题标题】：Get parse error with no reason Typescript, Vue, vue-property-decorator, VSCode无故获取解析错误 Typescript, Vue, vue-property-decorator, VSCode
【发布时间】：2020-09-15 10:50:32
【问题描述】：

我对 Typescript 和 Vue.js 完全陌生，我在这里找不到任何解决方案。

下面的代码给了我解析错误：'}' 预期

我检查了所有括号对，在我看来没有任何问题。

基本代码在这里。我从完全工作的基本示例中分出了它。 https://github.com/hanachan1026/vue-firebase-startup-kit

// Hello.vue
<template>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello
        {{userName}}
      </h1>
      <p>Firebase rocks!</p>
      <img id="img1" src="" alt="img1" />
    </div>
  </section>
</template>

<script lang="ts">
import { storage } from "../scripts/firebase";
import Vue from "vue";
import { Component } from "vue-property-decorator";

@Component
export default class Home extends Vue {
  created() { 
    const storageRef = storage.ref();

    const imagesRef = storageRef.child('images');

    const fileName = 'IMG_1009.JPG';

    const imgRef = imagesRef.child(fileName);

    imgRef.getDownloadURL().then(function (url) {
      const img: HTMLImageElement = <HTMLImageElement>document.getElementById('img1');

      img.src = url;
    }).catch(function(error) {
      console.log(error); // <= parse error here. why?
    });
  }

  get userName(): string {
    if (this.$store.state.user) {
      return this.$store.state.user.displayName;
    }
    return "";
  }
}
</script>

我知道这并不容易回答，因为会有很多原因。如果您有任何类似的经历，我想要任何 cmet。谢谢。

*添加

➤ npm run serve

> vue_kit@0.1.0 serve /Users/me/show-cam-img-demo
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                           3:34:02 PM

 error  in ./src/views/Hello.vue

Module Error (from ./node_modules/eslint-loader/index.js):

/Users/me/show-cam-img-demo/src/views/Hello.vue
  35:24  error  Parsing error: '}' expected

✖ 1 problem (1 error, 0 warnings)


 @ ./src/router/index.ts 4:0-37 9:13-17
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.37:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

No type errors found
Version: typescript 3.8.3
Time: 20252ms

【问题讨论】：

请显示确切的错误。
嗨，添加错误

标签： javascript typescript firebase vue.js

【解决方案1】：

错误发生在 eslint 中。你必须config eslint for typescript and vue。
使用 vue-tslint-loader 的 tslint 是 2019 年之前的解决方案。

【讨论】：