current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 4 down vote favorite

I am relatively new to both Angular2 and typescript. Since typescript is a superset of javascript, I'd expect functions like console.log to work. console.log works perfectly in .ts files when outside a component class but does not work as I'd expect from inside the component class.

// 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.
}

Is there anything that I am missing?

share|improve this question
    
what did you put in the @Component? Can you try and put a constructor in the class like this: constructor() { console.log('test')} – L.querter Jun 16 at 21:19
1  
i think it's not working because console.log is not wrapped in a function. can you show the JS compiled form ? – L.querter Jun 16 at 21:21
    
@L.querter: console.log is working when it's used inside the constructor but doesn't work when used outside the constructor even if constructor is present. Maybe wrapping it in a function is necessary. I wasn't aware of this. – Pranjal Mittal Jun 16 at 21:26
up vote 8 down vote accepted

It's not working because console.log() it's not in a "executable area" of the class "App".

A class is a structure composed by attributes and methods.

The only way to have your code executed it's to place it inside a method that is going to be executed. For instance: constructor()

console.log('It works here')

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

Think of class like a plain javascript object.

Would it make sense to expect this to work?

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

If you still unsure, try the typescript playground where you can see your typescript code generated into plain javascript.

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

share|improve this answer
    
A variable initialization is also an expression and I am confused why that works outside the constructor's scope and function calls do not. – Pranjal Mittal Jun 16 at 23:49
    
Try that typescript playgroung I mentioned above, you'll see that every variable definition is transpilled to a javascript function body. – Daniel Pliscki Jun 17 at 12:05
up vote 0 down vote

The console.log should be wrapped in a function , the "default" function for every class is its constructor so it should be declared there.

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

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

}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.