Estoy aprendiendo Angular4 y revisando los ejemplos del tutorial.
https://angular.io/docs/ts/latest/tutorial/toh-pt1.html
Tengo el siguiente código en el tutorial.
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>` }) export class AppComponent { title = 'Tour of Heroes'; // *1 hero: Hero = { id: 1, name: 'Windstorm' }; } export class Hero { id: number; // *2 name: string; }En el código se definen 2 clases, AppComponent y Hero. No puedo entender por qué para la declaración de miembro de una clase, AppComponent sigue la propiedad de estilo = valor mientras que la clase Hero usa la propiedad de estilo: valor
Si cambio la clase AppComponent a la siguiente, el código no funciona como se esperaba.
export class AppComponent { title : 'Tour of Heroes', hero: Hero : { id: 1, name: 'Windstorm' }; } Me gustaría saber cuál es la diferencia entre usar : y usar = y cuándo, ¿qué se debe usar?
Mire de nuevo el AppComponent :
export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: 1, name: 'Windstorm' }; }La primera definición de campo:
title = 'Tour of Heroes';está asignando un valor de cadena. Como ese valor es una cadena, TS puede inferir el tipo. La línea es equivalente a:
title: string = 'Tour of Heroes';La segunda definición de campo
hero: Hero = { id: 1, name: 'Windstorm' }; está asignando un objeto , que podría ser de any tipo. Entonces, aquí, para aprovechar al máximo TS, debemos ser específicos sobre el tipo de cosa que será. También se podría escribir:
hero: { id: number, name: string } = {...}; En la clase Hero , solo está configurando tipos, sin valores predeterminados. El patrón es en realidad el mismo en ambos:
name[: type][ = value];Probablemente valga la pena echar un vistazo al manual de TS para obtener más información sobre tipos y definiciones de clase.
: se usa en JSON para valor, ejemplo:
{ name: "name value" }; : también se usa en mecanografiado para definir un tipo de objetos. Por ejemplo:
myObj: JSON; = se utiliza para realizar una asignación fuera del JSON.
myObj: JSON = { name: "name value" }; // meaning myObj has type JSON and is equal to { name: "name value" };Los problemas en tu código:
title : 'Tour of Heroes', <-- Here you are making titles **type** 'Tour of Heroes'Le sugiero que lea la documentación básica de mecanografiado: https://www.typescriptlang.org/docs/handbook/basic-types.html
Diría que es una especie de interfaz, pero en lugar de implementarla, puede usar esta clase como un tipo:
export class Hero { id: number; // *2 name: string; } let a: Hero = 'some call to create new hero'; Se asegurará de que el objeto sea de tipo <Hero> , cualquier otra cosa será causa de error de tipo.
Aquí puedes ver que se ha utilizado como un tipo para crear un nuevo héroe de tipo héroe:
hero: Hero = { id: 1, name: 'Windstorm' };