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' };