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?
log() Method in TypeScript. In the console. log() method, we can output a message to the web console. The message may be a single string or multiple JavaScript objects.
Angular 2 is built on TypeScript, which uses ES6 syntax and compiles to vanilla JavaScript. Standard ES5 JavaScript is also valid TypeScript, so you can still use your existing code.
log Function in Angular. console. log is a JavaScript function that logs messages to the developer's console or the browser console to the web page. This method helps Angular developers by informing them about the errors, warnings, and what is happening during the execution of their code.
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 is 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
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);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With