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

Typescript

Typescript Problem Overview


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?

Typescript Solutions


Solution 1 - Typescript

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

Solution 2 - Typescript

> 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

Solution 3 - Typescript

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 )
}

Solution 4 - Typescript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSteve CooperView Question on Stackoverflow
Solution 1 - TypescriptAleksey L.View Answer on Stackoverflow
Solution 2 - TypescriptbasaratView Answer on Stackoverflow
Solution 3 - TypescriptJasonView Answer on Stackoverflow
Solution 4 - TypescriptSteve CooperView Answer on Stackoverflow