Declaring the type of 'this' in a typescript function?

Question

I'm writing a grunt task in TypeScript. I'm trying to translate something I already have in JavaScript.

So, when grunt runs a task, it runs a function. When it runs, grunt sets this to an object with useful properties, the same way that jQuery overloads this with the element you are working on. I could access useful properties like this.files;

grunt.registerMultiTask('clean', function() {
    this.files.forEach(function(f) { Delete(f); });
});

So, "delete all the files in this.files".

However, in TypeScript, I don't know if you can 'hint' to the compiler that this is a particular type, so I don't get intellisense. How do I tell TypeScript to consider this to be a different type?

Aleksey L. · Accepted Answer · 2021-04-11 05:27:34Z

168

Now (from TS 2.0) you can specify function's this type by using fake this parameter (should be the first one):

grunt.registerMultiTask('clean', function(this: SomeType) {
    //...
});

this parameters are fake parameters that come first in the parameter list of a function

More info here

edited Apr 11, 2021 at 5:27

answered Dec 28, 2016 at 8:45

Aleksey L.

38.4k11 gold badges86 silver badges90 bronze badges

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

3 Comments

Robert K. Bell Over a year ago

Here's the relevant documentation for the fake this parameter.

Simon_Weaver Over a year ago

'This' fake argument is a really hard thing to google for!

Olga Over a year ago

Seeing this (excuse the pun) and thinking its pure Voodoo =)

cobaltt7 · Accepted Answer · 2021-08-11 11:30:33Z

56

How do I tell TypeScript to consider this to be a different type

You can do that by declaring a this parameter. For your use case I've added this: {files:any[]}:

grunt.registerMultiTask('clean', function(this: {files:any[]}) {
    this.files.forEach(function(f) { Delete(f); });
});

More

Official docs on this parameter

edited Aug 11, 2021 at 11:30

cobaltt7

3816 silver badges16 bronze badges

answered Mar 7, 2015 at 22:41

basarat

278k60 gold badges475 silver badges528 bronze badges

Comments

Jason · Accepted Answer · 2018-02-02 16:29:34Z

3

While I found that is now possible with this:

class ClassyClass {
    prop = 'Juicy Strings'
}

function x( this: ClassyClass ) {
    console.log( this.prop )
}

I have come prefer an alternative that doesn't take up real estate in the arguments line

function x() {
    const that: ClassyClass = this

    console.log( that.prop )
}

answered Feb 2, 2018 at 16:29

Jason

8191 gold badge11 silver badges31 bronze badges

3 Comments

Matthias Over a year ago

Or you could use multi-line function parameters ;)

Sir.Nathan Stassen Over a year ago

Using that feels most clean to me as well. TY @Jason. Throwback. I recall back in the jQuery days doing a lot of that = this;

SanBen Over a year ago

If you put it in the parameters doesn't that add typechecking when you call the function? So that would be the stricter solution?

Steve Cooper · Accepted Answer · 2015-03-07 22:27:49Z

0

I have a bit of an answer. I can do this;

var self = <grunt.task.IMultiTask<string>>this;
self.files.forEach(function (f) {

});

which works OK. It's gonna have consequences, like not being able to write arrow functions...

answered Mar 7, 2015 at 22:27

Steve Cooper

21.6k17 gold badges75 silver badges90 bronze badges

1 Comment

Yourpalal Over a year ago

You an still write arrow functions, since they will close over the self variable. this in the arrow functions will still be incorrectly typed, but at least you can save a few characters!

Collectives™ on Stack Overflow

Declaring the type of 'this' in a typescript function?

4 Answers 4

3 Comments

More

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

More

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related