2016-06-16 22 views
19

Sono relativamente nuovo sia per Angular2 che per dattiloscritto. Poiché dattiloscritto è un superset di javascript, mi aspetto che funzioni come console.log funzionino. console.log funziona perfettamente nei file .ts quando si trova all'esterno di una classe di componenti ma non funziona come previsto nella classe del componente.console.log non funziona in Angular2 Component (Typescript)

// main.ts 

import { Component } from '@angular/core'; 
console.log("Hello1"); //1. This works perfectly 

@Component({..) 
export class App { 
s: string = "Hello2"; 
// console.log(s); //2. This gives compilation error (when uncommented) 
// Error: Function implementation is missing or not immediately following the declaration. 
} 

C'è qualcosa che mi manca?

+1

cosa hai inserito in @Component? Puoi provare a mettere un costruttore nella classe in questo modo: constructor() {console.log ('test')} –

+1

penso che non funzioni perché console.log non è racchiuso in una funzione. puoi mostrare il modulo compilato JS? –

+0

@ L.querter: console.log funziona quando è utilizzato all'interno del costruttore ma non funziona se utilizzato all'esterno del costruttore anche se il costruttore è presente. Forse è necessario avvolgerlo in una funzione. Non ero a conoscenza di questo. –

risposta

36

Non funziona perché console.log() non è in una "area eseguibile" della classe "App".

Una classe è una struttura composta da attributi e metodi.

L'unico modo per eseguire il codice è inserirlo in un metodo che deve essere eseguito. Per esempio: il costruttore()

console.log('It works here') 
 

 
@Component({..) 
 
export class App { 
 
s: string = "Hello2"; 
 
      
 
    constructor() { 
 
    console.log(this.s)    
 
    }    
 
}

Pensate di classe come un semplice javascript oggetto.

Avrebbe senso aspettarsi che funzioni?

class: { 
 
    s: string, 
 
    console.log(s) 
 
}

Se ancora incerti, tenta il parco giochi dattiloscritto dove si può vedere il codice generato dattiloscritto in javascript pianura.

https://www.typescriptlang.org/play/index.html

+0

Un'inizializzazione di variabile è anche un'espressione e sono confuso perché questo funziona al di fuori dell'ambito del costruttore e le chiamate di funzione no. –

+0

Prova questo esempio di dattiloscritto che ho menzionato sopra, vedrai che ogni definizione di variabile viene trasferita a un corpo di funzione javascript. –

3

Il console.log deve essere avvolto in una funzione, la funzione "default" per ogni classe è la sua constructor quindi dovrebbe essere dichiarato lì.

import { Component } from '@angular/core'; 
console.log("Hello1"); 

@Component({ 
    selector: 'hello-console', 
}) 
    export class App { 
    s: string = "Hello2"; 
    constructor(){ 
    console.log(s); 
    } 

} 
Problemi correlati