角度中的“ArrayBuffer”类型不存在属性“split”答案

【问题标题】：Property 'split' does not exist on type 'ArrayBuffer' in angular角度中的“ArrayBuffer”类型不存在属性“split”
【发布时间】：2020-02-03 16:52:25
【问题描述】：

我试图使用 Filereader 读取 CSV 文件，并希望将内容转换为数组。我能够正确获取 CSV 文件，但是每当我想将 CSV 文件的内容转换为数组时，都会出现此错误。

为什么会出现这个错误，我该如何解决？


    ERROR in src/app/app.component.ts(31,10): error TS2314: Generic type 'Array<T>' requires 1 type argument(s).
        src/app/app.component.ts(31,21): error TS2339: Property 'split' does not exist on type 'string | ArrayBuffer'.
          Property 'split' does not exist on type 'ArrayBuffer'.

这是我的 app.component.html 文件：

    <nav class="navbar navbar-light bg-light">
      <a class="navbar-brand" href="#">
        <img src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top"
          alt="">
        Floor Plan
      </a>
    </nav>

    <div class="card m-5">
      <div class="row row-5">
        <div class="col-4">
          <div class="input-group">
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="inputGroupFile04" (change)="upload($event.target)">
              <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
            </div>
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button" class="btn btn-primary btn-sm">Upload </button>
            </div>
          </div>
        </div>

        <div class="col-8 border border-primary" >
          {{csvContent}}

        </div>

      </div>
    </div>

这是我的 app.component.ts 文件：

    export class AppComponent {
      fileToUpload: File = null;
      title = 'floor-plan';
      csvContent: string[] = []



      upload(input: HTMLInputElement) {

        const files = input.files;
        var content = this.csvContent;

        if (files && files.length) {

          const fileToRead = files[0];

          const fileReader = new FileReader();
          fileReader.onload = (event) => {
            this.csvContent = (event.target as FileReader).result.split('\n').map((data) => {
              return data.split(',')
            })

          }

          fileReader.readAsText(fileToRead, "UTF-8");
        }

      }
     }

【问题讨论】：

好吧，ArrayBuffer 原型根本没有split() 方法。无论如何，您希望这样做是什么？
@Pointy - 不，但它存在于string，当您使用readAsText 时，result 将是这样。
@T.J.Crowder 啊，那好吧；那么这是 TypeScript 类型系统/声明问题吗？有道理。

标签： javascript angular filereader

【解决方案1】：

FileReaderresult 属性的类型对于 TypeScript 来说很棘手，因为它取决于你在代码的其他地方调用了什么方法。

在您的情况下，您正在调用 readAsText，因此您知道 result 包含一个字符串，而不是 ArrayBuffer，但 TypeScript 不知道这一点。

你需要一个类型保护或类型断言。例如，使用类型保护：

fileReader.onload = (event) => {
  const result = fileReader.result;
  if (typeof result !== "string') {
    throw new Error("Unexpected result from FileReader");
  }
  this.csvContent = result.split('\n').map((data) => {
    return data.split(',')
  })
};

或者使用类型断言：

fileReader.onload = (event) => {
  this.csvContent = (fileReader.result as string).split('\n').map((data) => {
    return data.split(',')
  })
};

在上面的两个示例中，我使用了fileReader 而不是event.target，因为onload 处理程序关闭了它。

【讨论】：

【解决方案2】：

FileReader.result 在其生命周期中可以是字符串或 ArrayBuffer。它开始是一个 ArrayBuffer，然后，在读取文件后，它被转换为字符串。问题是，Typescript 不喜欢在某个时间点将 .split() 方法应用于可能是 ArrayBuffer 的东西。

它将在脚本执行的这一点是一个字符串；你知道，但 Typescript 不知道。

为了将它告诉 Typescript，将其转换为这样的字符串：

this.csvContent = <string>((event.target as FileReader).result).split(...)

那么 Typescript 应该停止抱怨 :)

【讨论】：

谢谢。正是我想要的。赞成@jeremy-thille