rewrite javascript containing closure in typescript class

Question

how to rewrite below javascript in typescript class. The greet2 function in prototype is an immediately invoke function.

function Greeter(greeting) {
    this.greeting = greeting;
}

Greeter.prototype.greet = function() {
    return "Hello, " + this.greeting;
}

//an immediately invoke function
Greeter.prototype.greet2 = function{
    let blabla = 'hello, ';
    return function greet2(foo) {
        return blabla + foo;
    }
}();

let greeter = new Greeter({message: "world"});  

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
    alert(greeter.greet2('tom'));
};

document.body.appendChild(button);

Matt McCutchen · Accepted Answer · 2018-08-23 02:14:07Z

1

You can declare the property and then initialize it on the prototype:

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
    greet2!: (foo) => string;  // in case of strictPropertyInitialization
    static staticInitializer() {
        // Here we have access to non-public members of `Greeter`.
        Greeter.prototype.greet2 = function(){
            let blabla = 'hello, ';
            return function greet2(this: Greeter, foo) {
                return blabla + foo;
            }
        }();
    }
}
Greeter.staticInitializer();

When this suggestion is implemented, you'll be able to use a real static initializer.

answered Aug 23, 2018 at 2:14

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

basarat · Accepted Answer · 2018-08-23 01:55:42Z

0

how to rewrite below javascript in typescript class

Using a property initializer:

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
    greet2 = (() => {                      // HERE 
        let blabla = 'hello, ';
        return function greet2(foo) {
            return blabla + foo;
        }
    })()
}

let greeter = new Greeter("world");

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function () {
    alert(greeter.greet());
}

document.body.appendChild(button);

answered Aug 23, 2018 at 1:55

basarat

278k60 gold badges475 silver badges528 bronze badges

1 Comment

Matt McCutchen Over a year ago

This is less efficient than the original: it's evaluated once for each object instantiated instead of once when the class is defined.

Collectives™ on Stack Overflow

rewrite javascript containing closure in typescript class

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related