• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

335
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 ?

about 3 years 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.

about 3 years 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

about 3 years 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'
};
about 3 years 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 vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda