Update HTTP guide

[jbogarthyde]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• angular.io application / infrastructure changes
• Other... Please describe:

What is the current behavior?

HTTP guide needs work -- long and confusing

Issue Number: N/A

What is the new behavior?

Edit and reorganize content - from unfinished PR #28519

Does this PR introduce a breaking change?

• Yes
• No

[mary-poppins]

You can preview 093c698 at https://pr32045-093c698.ngbuilds.io/.

[mary-poppins]

You can preview 81e59d9 at https://pr32045-81e59d9.ngbuilds.io/.

[alxhub]

This isn't true - in the example the type is declared in the callback function, so TypeScript knows that data is of type Config and data.heroesUrl is valid to write. I don't know any circumstance in TypeScript where dot-property access isn't allowed but bracket access is. Under some configurations they can mean different things to the optimizer, but they both should be allowed.

I think you're looking for an example of the form:

.subscribe(data => this.config = {
    heroesUrl: (data as any).heroesUrl,
    textfile:  (data as any).textfile,
});

Here, data is of type Object, so accessing data.heroesUrl or data.textfile isn't allowed without the cast.

It's possible to specify the type in the callback function as done in the example currently, but that only works for that specific subscribe callback function - any RxJS operators, etc will also need the type specified. The advantage of specifying it as a type parameter to .get is that the entire Observable will be correctly typed, no matter where you store/pass it.

[jbogarthyde]

Restructured these sections - please check.

[alxhub]

Suggested change

	When you pass an interface or a class as a type parameter to the `HttpClient.get()` method, use the RxJS `map` operator to read the response data. Angular parses the response with `JSON.parse()`, but does not instantiate an object of the type parameter.
	When you pass an interface as a type parameter to the `HttpClient.get()` method, use the RxJS `map` operator to read the response data. Angular parses the response with `JSON.parse()`, but does not instantiate an object of the type parameter.

(changed to not mention classes)

Also, I think this section is misleading - map should be used to transform data, it has no special connection with type parameters. The role of map is to convert from the model the server returns to the model needed by the UI, so that subscribing can be done with the async pipe.

[jbogarthyde]

Please check

[mary-poppins]

You can preview 5a3821d at https://pr32045-5a3821d.ngbuilds.io/.

[mary-poppins]

You can preview 853a538 at https://pr32045-853a538.ngbuilds.io/.

[mary-poppins]

You can preview ad9916f at https://pr32045-ad9916f.ngbuilds.io/.

[mary-poppins]

You can preview 662ec0f at https://pr32045-662ec0f.ngbuilds.io/.

[mary-poppins]

You can preview 041d9b7 at https://pr32045-041d9b7.ngbuilds.io/.

[mary-poppins]

You can preview e965f68 at https://pr32045-e965f68.ngbuilds.io/.

[IgorMinar]

please make the suggested adjustments, otherwise lgtm. thanks!

[mary-poppins]

You can preview d251fa6 at https://pr32045-d251fa6.ngbuilds.io/.

[mary-poppins]

You can preview 7cfe0ca at https://pr32045-7cfe0ca.ngbuilds.io/.

[mary-poppins]

You can preview 37da89e at https://pr32045-37da89e.ngbuilds.io/.

[alxhub]

This is still not true - data['heroesUrl'] and data.heroesUrl` are the same in TypeScript, with the same type-checking rules applied. There isn't a circumstance where the former is valid and the latter isn't.

[jbogarthyde]

I'm just removing the whole paragraph, I hope that works.

[mary-poppins]

You can preview 2a8c292 at https://pr32045-2a8c292.ngbuilds.io/.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}