对象的类型为 'unknown'。 ts(2571) 与 Vuejs 和打字稿

Question

所以我试图将 JSON 数据存储在 Vue 项目的变量中。

上传和存储文件的代码是

<input type="file" id="file" ref="fileSelect" class="custom-file-input" @change="showfiles" />

<script lang="ts">
.
.
methods: {
showfiles() {
    let files = this.$refs.fileSelect.files //Error Object is of type 'unknown'. ts(2571) 
    var reader = new FileReader();
    reader.onload = ({ target: { result }}) => { this.p = JSON.parse(result); };
    reader.readAsText(files[0]);
    console.log(this.p) //I am storing JSON data in p
}}

我在网上搜索并找到了各种修复程序，但 none 对我有用我尝试将 "useUnknownInCatchVariables": false 添加到 tsconfig，它暂时修复了错误，但错误又回来了。我也试过try and catch

showfiles() {
      try{
        let files = this.$refs.fileSelect.files
        var reader = new FileReader();
        reader.onload = ({ target: { result }}) => { this.p = JSON.parse(result); };
        reader.readAsText(files[0]);
        console.log(this.p)
      }
      catch(err) {
        if (err instanceof Error) { 
      console.log(err.message);
    } else {
      console.log('Unexpected error', err);
    }
}
    }

但其中 none 有效。我将不胜感激任何建议。

Answer 1

尝试自己转换 fileSelect ref 的类型：

showfiles() {
  const files = (this.$refs.fileSelect as HTMLInputElement).files // const files: FileList | null
    // ...
  }

我猜你没有正确阅读结果。根据 MDN 你应该只从 filereader 的 result 属性.

中获取结果

reader.addEventListener("load", () => {
  this.p = JSON.parse(reader.result);
}, false);

对象的类型为 'unknown'。 ts(2571) 与 Vuejs 和打字稿

Object is of type 'unknown'. ts(2571) with Vuejs and Typescript

typescript

vue.js