Fetch client having an issue with JSON array assignment

Question

The Aurelia fetch client docs have a basic example of getting json data:

bind() {
    let client = new HttpClient();

    return client.fetch('data.json')
        .then(response => response.json())
        .then(data => {
            console.log(data[1]);
        });
}

The above works fine yet the following does not:

files = [];

bind() {
    let client = new HttpClient();

    return client.fetch('data.json')
        .then(response => response.json())
        .then(files => this.files = files);
}

Gulp now complains "error TS2322: Type 'Response' is not assignable to type 'any[]'."

Even more odd is that I now get XHR 404 errors in my console. This makes no sense; the data.json file had no issue being found and fetched the first time. The only difference in the second code snippet is that instead of logging the data to the console, I'm actually trying to do something with it.

@Fenton Thanks for the comment. I have quite a few dependencies in my package.json, what would I be looking for to share? I don't think they'd all fit in this comment. — 8protons, Oct 19 '17 at 18:57
It seems like `files` is of type `Response` which is not assignable to `any[]`, which is the type of `this.files` that you set with `files = [];` You could use `(files: any) =>` or you could look into how to work with Responses from HttpClient to use appropriate types. — Explosion Pills, Oct 19 '17 at 18:58
@Fenton I can still provide it if you like but Explosion Pills solved it. The code I was emulating was an exact copy from the Aurelia-Table plugin documentation, which I believe worked with no issues at the time but does not now. If you're curious, look under The Basics header, click the JS tab: https://tochoromero.github.io/aurelia-table/ — 8protons, Oct 19 '17 at 19:02
@ExplosionPills Wow! Thank you so much!!! If you'd like, throw your comment in an answer so we can lock this Q&A in for others who may get stuck on this. Ive reached out to several other people so far who have been stumped. — 8protons, Oct 19 '17 at 19:03
I actually can't reproduce your issue ... what version of TypeScript are you using? — Explosion Pills, Oct 19 '17 at 19:39

score 1 · Accepted Answer · answered Oct 19 '17 at 19:44

I believe your specific issue may be caused by an older version of TypeScript (2.1, the latest is 2.5). If you have an opportunity to do so, you can try updating it.

response in the statement response => is of type Response defined by Aurelia. When you are running this.files = files, it seems like TypeScript thinks that files is of type Response. You are already implicitly declaring this.files as type any[], so the assignment is not allowed.

You can get around this by setting an explicit type for files, or even just using any:

.then((files: any[]) => this.files = files);

I would try to avoid using any to get around type safety and work with the types, but the issue you're running into appears to be a bug in the version of TypeScript and/or Aurelia that you're using.

Fetch client having an issue with JSON array assignment

1 Answers1