Route params type conversion
<p>I'm currently going through the Angular 2 <a href="https://angular.io/docs/ts/latest/tutorial/toh-pt5.html" rel="noreferrer">tutorial</a> and learning how to use the router with parameters to fetch object data by an id. </p>

<p>Below is the code used in reference to the question I will ask.</p>

<p>Here is the route definition within<code>app.module.ts</code>for directing to a component based on an id</p>

<pre><code>      {
        path:'detail/:id',
        component:HeroDetailComponent
      }
</code></pre>

<p>Service method (from Service class) for grabbing the data based on id</p>

<pre><code>getHero(id: number): Promise&lt;Hero&gt; {
    return this.getHeroes()
    .then(heroes =&gt; heroes.find(hero =&gt; hero.id === id));
}
</code></pre>

<p>And the constructor and OnInit method (from hero-details.component where data will be displayed) used for pulling the information from the url</p>

<pre><code>constructor(
private heroService: HeroService,
private route: ActivatedRoute,
private location: Location
){}

ngOnInit():void{
  this.route.params
    .switchMap((params:Params) =&gt; this.heroService.getHero(+params['id'])
      .subscribe(hero =&gt; this.hero = hero));
}
</code></pre>

<p>And finally an exmaple of the data we're pulling in. id is type number and name type string.</p>

<pre><code>{ id: 11, name: 'Mr. Nice' }
</code></pre>

<p><strong>QUESTION:</strong> Within the <code>ngOnInit</code> we convert the id from a string to a number within the parameters of the <code>this.heroService.getHero()</code> call. How exactly does the <code>+params['id']</code> work in terms of conversion? My guess was that it's due to the way we laid out the route within the <code>app.module.ts</code> file and that <code>detail/:id</code> is equivalent to <code>params['id']</code> but I want a clear explination so that I know what I'm doing with certainty in the future. Thank you</p>