typescript - console.log 在 Angular2 组件( typescript )中不起作用

Question

我对 Angular2 和 typescript 都比较陌生。由于 typescript 是 javascript 的超集，我希望像 console.log 这样的函数能够工作。 console.log 在组件类外部时在 .ts 文件中完美运行，但在组件类内部无法正常运行。

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

有什么我遗漏的吗？

Answer 1

它不起作用，因为 console.log() 它不在类“App”的“可执行区域”中。

类是由属性和方法组成的结构。

执行代码的唯一方法是将它放在将要执行的方法中。例如:constructor()

console.log('It works here')

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

将类想象成一个普通的 javascript 对象。

期望这会起作用有意义吗？

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

如果您仍然不确定，请尝试 typescript playground，您可以在其中看到您的 typescript 代码已生成为纯 javascript。

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