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

Question

I was trying to read a CSV file using Filereader and want to convert the content into an array. I was able to get the CSV file properly, but whenever I want to convert the content of CSV file into an array I have this error.

---

Why do I have this error and how can i solve it?

    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'.

---

Here is my app.component.html file:

    <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>

---

here is my app.component.ts file:

    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");
        }

      }
     }

Answer 1

The type of the FileReader result property is tricky for TypeScript, because it depends on what method you've called elsewhere in the code.

In your case, you're calling readAsText so you know that result contains a string, not an ArrayBuffer , but TypeScript doesn't know that.

You'll need a type guard or type assertion. For instance, with a type guard:

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(',')
  })
};

Or with a type assertion:

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

---

In both of the examples above, I've used fileReader rather than event.target since the onload handler closes over it.

Answer 2

FileReader.result can be either a string or an ArrayBuffer along its life. It starts being an ArrayBuffer, then, after the file is read, it gets converted to a string. The problem is, Typescript isn't happy about applying the .split() method to something that can be an ArrayBuffer at some point in time.

It will be a string at this point of the script execution; you know that, but Typescript doesn't.

In order to tell this to Typescript, cast it to a string like so :

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

Then Typescript should stop complaining :)