Skip to content
This repository has been archived by the owner on Dec 4, 2017. It is now read-only.

Updated code example to build array of Hero #407

Closed

Conversation

bsimpson
Copy link

Previously the instructions indicated that this builds an array of Hero instances:

var HEROES: Hero[] = [
      { "id": 11, "name": "Mr. Nice" },
      { "id": 12, "name": "Narco" },
      { "id": 13, "name": "Bombasto" },
      { "id": 14, "name": "Celeritas" },
      { "id": 15, "name": "Magneta" },
      { "id": 16, "name": "RubberMan" },
      { "id": 17, "name": "Dynama" },
      { "id": 18, "name": "Dr IQ" },
      { "id": 19, "name": "Magma" },
      { "id": 20, "name": "Tornado" }
    ]
console.log(HEROES[0]) # => Object {...}

This actually builds an array of Object instances as we are not instantiating Hero. This is confusing as a user would think they can add a function to the Hero class and access it via an instance.

In order to instantiate an array of Hero instances, we need to map over the array and instantiate Hero for each entity:

var HEROES: Hero[] = [
      { "id": 11, "name": "Mr. Nice" },
      { "id": 12, "name": "Narco" },
      { "id": 13, "name": "Bombasto" },
      { "id": 14, "name": "Celeritas" },
      { "id": 15, "name": "Magneta" },
      { "id": 16, "name": "RubberMan" },
      { "id": 17, "name": "Dynama" },
      { "id": 18, "name": "Dr IQ" },
      { "id": 19, "name": "Magma" },
      { "id": 20, "name": "Tornado" }
    ].map(function(heroAttribute) {
      var hero: Hero;
      hero = new Hero();
      hero.id = heroAttribute.id;
      hero.name = heroAttribute.name;
      return hero;
    });

Now we have an array of Hero entities:

console.log(HEROES[0]) # => Hero {...}

@googlebot
Copy link

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.


  • If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
  • If you signed the CLA as a corporation, please let us know the company's name.

@bsimpson
Copy link
Author

I signed it!

@googlebot
Copy link

CLAs look good, thanks!

@wardbell
Copy link
Contributor

You are right. OTOH, there is a large issue that concerns us.

This part of the code isn't an important point for the tour ... more of a distraction really. We want to keep the reader's eyes on the prize. My instinct is that your solution adds complexity without much _Angular 2_ insight. Perhaps we'd better off saying ...

We've created an array of Heroes that are structural equivalent to an instance of the Hero class which is good enough for our tour.

Or perhaps we should give the Hero class a ctor and rewrite this to instantiate Hero instances?

I want to think about it. I'm leaving this open while I do.

That said, thanks for your close reading of the text and thoughtful comment. We need that kind of help.

Keep your eyes on this and see how we decide.

And keep those suggestions coming.

@bsimpson
Copy link
Author

Understandable @wardbell . It doesn't add to the Angular 2 tutorial. That being said, if we aren't using the class Hero, I don't think we need it at all? I'm reasonably sure I can delete this class definition and the code works the same. At no point do we initialize a Hero instance?

@filipesilva
Copy link
Contributor

Having the type there (even if it's not a real instance of Hero) helps typescript infer a few things and provide better tooling.

IIRC as far as typescript tooling is concerned, if you say it's a Hero and the object has all the required fields of a Hero, typescript will do all typechecks as if it was a Hero. And if it doesn't have all the required fields, it'll warn you as well.

This is what I get in Atom if I try to say put a fake hero object that doesn't have an id into what I say is a Hero array.

image

EDIT: just checked and typescript will even complain if you put extra properties in there, that Hero doesn't have.

@wardbell
Copy link
Contributor

Also ... you've only seen the first two chapters of the tutorial. The Hero class becomes more important as the app evolves.

That you haven't seen the rest of the tutorial is entirely my fault. @johnpapa wrote it; it's up to me to get it published ... and I have been tardy in doing so. Intend to fix that soon.

@wardbell wardbell closed this Nov 26, 2015
@bsimpson
Copy link
Author

Ah, good to know. Thanks again for looking this PR over. I'm happy to close
if we decide the instantiation of Hero objects is not the critical path.

On Thu, Nov 26, 2015, 5:17 PM Ward Bell notifications@github.com wrote:

Also ... you've only seen the first two chapters of the tutorial. The Hero
class becomes more important as the app evolves.

That you haven't seen the rest of the tutorial is entirely my fault.
@johnpapa https://github.com/johnpapa wrote it; it's up to me to get it
published ... and I have been tardy in doing so. Intend to fix that soon.


Reply to this email directly or view it on GitHub
#407 (comment).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants