Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

142
Vistas
TypeScript : Colon vs Equal To ( Angular Tutorial )

I am learning Angular4 and going through the tutorial examples.

https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

I have the below code in the 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;
}

In the code 2 classes are defined, AppComponent and Hero. I am not able to understand why for member declaration of a class, AppComponent follows the style property = value while class Hero uses style property : value

If I change the class AppComponent to the below, the code doesn't work as expected.

export class AppComponent { 
    title : 'Tour of Heroes', 
      hero: Hero : {
      id: 1,
      name: 'Windstorm'
    };
  }

I would like to know whats the difference between using : and using = and when what should be used ?

8 months ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

Look again at the AppComponent:

export class AppComponent { 
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

The first field definition:

title = 'Tour of Heroes';

is assigning a string value. Because that value is a string, TS can infer the type. The line is equivalent to:

title: string = 'Tour of Heroes';

The second field definition

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

is assigning an object, which could be any type. So here, to get the most out of TS, we should be specific about the kind of thing it will be. It could also be written:

hero: { id: number, name: string } = {...};

In the Hero class, you're only setting types, no default values. The pattern is actually the same in both:

name[: type][ = value];

It's probably worth having a look in the TS handbook for more information about types and class definitions.

8 months ago · Santiago Trujillo Denunciar

0

: is used in JSON for value, example:

{ name: "name value" };

: is also used in typescript to define an objects type. For example:

myObj: JSON;

= is used to make an assignment outside of the JSON.

myObj: JSON = { name: "name value" }; // meaning myObj has type JSON and is equal to { name: "name value" };

The problems in your code:

title : 'Tour of Heroes',  <-- Here you are making titles **type** 'Tour of Heroes'

I suggest you to read the basic documentation of typescript: https://www.typescriptlang.org/docs/handbook/basic-types.html

8 months ago · Santiago Trujillo Denunciar

0

I would say it is kind of interface but instead of implementing it you can use this class as a type:

export class Hero {
  id: number; // *2
  name: string;
}

let a: Hero = 'some call to create new hero';

It will ensure that the object is a type <Hero> anything else will be cause in type error.

Here you can see it is been used as a type to create a new Hero of type Hero:

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};
8 months ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.