javascript - TypeScript yöntemde yöntem çağırma=TypeError: this.print bir fonksiyon değil

Bir main.ts dosyam var:

import { App } from './app';
import './styles.scss';

ready(new App().init);

function ready(fn) {
  if (document.readyState !== 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

ve bir app.ts dosyası:

export class App {
    constructor() {

    }
    private print = (str: string) => console.log(str);
    init(){
        this.print('test');
    }
}

Bunu, bu tsconfig.json dosyasını kullanarak webpack'te ts-loader ile çalıştırdığımda:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "lib": ["es5", "dom", "es2015.iterable"]
    }
}

Hata alıyorum: Yakalanmamış TypeError: this.print bir fonksiyon değil at HTMLDocument.App.init (app.ts:17)

Yöntemi private olarak print(str){ console.log(str); } şeklinde oluşturmaya çalıştım ama bu sorunu çözmedi.

init() yönteminde metod çağrısını nasıl çalıştırabilirim?

DÜZENLEME: eklemeyi unuttum, webpack v. 1.14.0 ve TypeScript 2.1.5 kullanıyorum (2.1.4 ile de denedim)

Cevap #1

Sorun, new App().init'i bağlamadan geçiriyor olmanız ve çalıştırıldığında this'in düşündüğünüz şey olmamasıdır.

Bunu yapmalısın:

let app = new App();
ready(app.init.bind(app));

Başka bir seçenek:

export class App {
    constructor() {
        this.init = this.init.bind(this);
    }

    private print = (str: string) => console.log(str);

    init() {
        this.print('test');
    }
}

Veya bir ok fonksiyonu kullanabilirsiniz:

export class App {
    constructor() {}

    private print = (str: string) => console.log(str);

    init = () => {
        this.print('test');
    }
}

Ok fonksiyonlarıyla ilgili mesele şudur ki, bu yöntem sınıfın prototipine eklenmez, bunun yerine örneğin bir özelliği olarak eklenir.
Çoğu durumda bu sorun değildir, ancak App sınıfını alt sınıf yapmayı ve init yöntemini geçersiz kılmayı planlıyorsanız, super.init çağırmada bir sorun yaşayabilirsiniz.

Cevap #2

En basit çözüm yazmaktır

import { App } from './app';
const app = new App();
ready(() => app.init());

Bu, miras veya prototipleri etkilemez veya App sınıfının davranışını herhangi bir şekilde değiştirmez.

Bununla birlikte, Nitzan Tomers'in cevabı öğrenilmesi ve anlaşılması son derece önemli olan değerli bilgiler içermektedir.