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

Posted 2023-02-22

【中文标题】无故获取解析错误 Typescript, Vue, vue-property-decorator, VSCode

【英文标题】：Get parse error with no reason 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=""  />
    </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

【问题讨论】：

请显示确切的错误。

嗨，添加错误

【参考方案1】：

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