TypeScript assign Type for this.varName in JavaScript Function

Question

I have an old project which is written in JavaScript and I've "converted" it to TypeScript by simply renaming it to .ts.

Everything works fine, but I don't know how to assign the type for the following example:

function test(userid: number) {
    var that = this;
    this.UserId = userid;
    //this.UserId : number = userid;   //Not Working
}

test.prototype.load = () => {
     var id = this.UserId;
}

I don't know how to assign the TypeDefinition to the local UserId variable. This is just a simple example. My project is very large and I can't refactor the whole thing.

#3694 Supporting 'this' type

Jason Kleban
– Jason Kleban

2015-11-04 15:01:21 +00:00
Commented Nov 4, 2015 at 15:01 — Jason Kleban
– Jason Kleban, Commented Nov 4, 2015 at 15:01

MartyIX · Accepted Answer · 2015-11-04 11:05:32Z

I'm not aware of a way how to assign type to this.UserId. I don't think, you can do it because that's what classes are for.

In TypeScript you would write:

class test {
    public UserId: number;

    constructor(userid: number) {
        this.UserId = userid;
    }

    public load = () => {
        let id = this.UserId;
    }
}

which translates to:

var test = (function () {
    function test(userid) {
        var _this = this;
        this.load = function () {
            var id = _this.UserId;
        };
        this.UserId = userid;
    }
    return test;
})();

If you don't have resources to rewrite your app, then I would simply go with:

function test(userid: number) {
    this.UserId = userid; // Don't add type here ...
}

test.prototype.load = () => {
    var id = this.UserId as number; // ... add type here
}

It's not that powerful but it's better than nothing.

davestevens · Accepted Answer · 2015-11-04 13:21:34Z

0

For a small amount of effort, the compiler enforces typing and you get code completion if you define an interface and hide a cast in a function call (that I have called typed() here). Wrap any typed uses of this with that function.

interface Test {
    UserId: number;
}

function typed(test: any): Test {
    return <Test>test;
}

function test(userid: number) {
    var that = typed(this);
    that.UserId = userid;
    var result: number = that.UserId; // Compiles without errors
    that.UserId.toFixed(); // Compiles without errors
}

test.prototype.load = () => {
    var id = typed(this).UserId;
}

It may be a good half-way house.

answered Nov 4, 2015 at 13:21

davestevens

2,3232 gold badges18 silver badges19 bronze badges

Comments

David Sherret · Accepted Answer · 2015-11-04 15:09:05Z

First of all, don't use an arrow function for the load method. Use a function expression:

function test(userid: number) {
    this.UserId = userid;
}

test.prototype.load = function() {
     var id = this.UserId; // now this will work
};

An arrow function doesn't bind to its own this value, but uses the this value in the parent scope. So in a web browser, the code with the arrow function would use Window, but with a function expression like shown here, it will use the instance of test. This is the same in JavaScript, so maybe the use of an arrow function was an addition to the code?

If you want to start adding type information, you might as well change the code to be an ES6 class. It's less work in the long run and it's quite simple to do over time. Here's an example:

class test {
    constructor(public UserId: number) {
    }

    load() {
        var id = this.UserId; // id is typed as number
    }
}

Collectives™ on Stack Overflow

TypeScript assign Type for this.varName in JavaScript Function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related