Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Annotation of `this` in function declarations #452

Open
jussi-kalliokoski opened this Issue May 18, 2015 · 18 comments

Comments

Projects
None yet
@jussi-kalliokoski
Copy link

commented May 18, 2015

Currently it seems that you can only annotate the this magic reference by putting the function as a method in a class declaration.

However, in the light of the new bind syntax proposal, it would make sense to be able to annotate functions that take in this as data, e.g.

function head (count) {
    return this.slice(0, count);
}

[1,2,3]::head(2) // [1,2]

could be annotated something like:

function head <T> Array<T> -> (count : number) : Array<T> {
  ...
}
@samwgoldman

This comment has been minimized.

Copy link
Member

commented May 18, 2015

Flow is (mostly) smart about this already without annotations. I'm not clear what this new bind syntax is (do you have a link to a spec?), but I imagine flow will support it the same way that flow currently supports bind, call, and apply.

/* @flow */

function head(count) {
  return this.slice(0, count);
}

head.bind([]) // OK
head.bind(1) // bad
@jussi-kalliokoski

This comment has been minimized.

Copy link
Author

commented May 19, 2015

I'm not clear what this new bind syntax is (do you have a link to a spec?)

Ah, sorry, forgot the link, fixed.

Flow is (mostly) smart about this already without annotations

Yes, but it would be nice to be able to annotate this instead, for documentational purposes (easier to understand at a glance and also allows for better error messages, as well as documentation generation), but also for standalone definitions.

@jussi-kalliokoski

This comment has been minimized.

Copy link
Author

commented Jun 9, 2015

Having thought about this a bit more, a simpler syntax would actually be to allow specifying this as a parameter, as so:

function add (this : number, b : number) : number {
  return this + b;
}

function add (/*: this : number, */ b /*: number */) /*: number */ {
  return this + b;
}

/*: (this : number, b: number) => number */
function add (b) {
  return this + b;
}
@avikchaudhuri

This comment has been minimized.

Copy link
Contributor

commented Jun 19, 2015

Agree that we should support this to be annotated as a parameter. This requires some parser work too, btw, since this is not a valid identifier everywhere.

We need this whenever methods are exported, by the way. It's true Flow is good in inferring this types, but it sucks that this information is lost across modules.

Related: constructor functions can be annotated as of 618186a

@Artazor

This comment has been minimized.

Copy link

commented Aug 3, 2015

Hi guys! what about the following examples: Microsoft/TypeScript#1985 (comment)
Are they too complex/ugly?

@izaakschroeder

This comment has been minimized.

Copy link

commented Aug 7, 2015

+1

@danvk

This comment has been minimized.

Copy link
Contributor

commented Oct 22, 2015

Pulling in some material from #968: an example, and a link to how Google Closure does this.


There's an error (marked with <---) in this snippet which Flow could potentially catch:

class RemoteFile {
  url: string;
...
  promiseXHR(xhr: XMLHttpRequest): Q.Promise<[any, Event]> {
    var url = this.url;
    var deferred = Q.defer();
    xhr.addEventListener('load', function(e) {
      if (this.status >= 400) {
        deferred.reject(this.status + ' ' + this.statusText);
      } else {
        deferred.resolve([this.response, e]);
      }
    });
    xhr.addEventListener('error', function(e) {
      deferred.reject(`Request for ${this.url} failed: ${this.status}`);  // <---
    });
    this.numNetworkRequests++;
    xhr.send();
    return deferred.promise;
  }
}

The problem is that this inside the addEventListener callback refers to the XMLHttpRequest object (I believe) and not the RemoteFile class. The latter has a url property but not a status property, whereas the former has status but not url. Clearly this code isn't right!

Flow doesn't complain, though. It thinks this has type any in the event listener.

Where possible, the DOM declarations should indicate the type of this in callbacks to prevent this sort of mistake.

For example, Google's Closure Compiler provides an @this annotation. You can see an example of this in action in the declaration for Array.prototype.find.

@glortho

This comment has been minimized.

Copy link

commented Apr 18, 2016

In case you land here before this +1 functionality is added, and you need types just for the fn body, just do something like this:

type Ctx = { foo: string, bar: number }
myMethod() {
  const myCtx: Ctx = this;
  // do stuff with myCtx instead of this
}
@STRML

This comment has been minimized.

Copy link
Contributor

commented Aug 22, 2016

Just for reference, TS 2.0 landed with this feature last month. It special-cases the first parameter if its name is this. I like that, reminds me of Python.

function f(this: void) {
    // make sure `this` is unusable in this standalone function
}
interface UIElement {
    addClickListener(onclick: (this: void, e: Event) => void): void;
}

An interesting note from the ticket when they were speccing it:

Yeah, the callback literally does "receive" this object as a parameter. That's how it works for all functions. It just happens that there are different rules for how you pass the value of this, it doesn't appear in the arguments array, and there's a different default value in non-strict mode. Otherwise it's basically just another argument.

Makes sense to me. If babel-plugin-flow-strip-types stripped the entire first parameter when its name is this, it could work. Will likely require special-casing in ESLint etc.

@nmn

This comment has been minimized.

Copy link
Contributor

commented Mar 4, 2017

This already works in Flow:

function head (count: number) {
  (this: Array<number>);
  return this.slice(0, count);
}

head.call([1, 2, 3], 10);
head.call(['123'], 20); // error

Do we really need new syntax for this?

However there are some bugs with the approach as this totally bugs out:

function head<T>(count: number): Array<T> {
  (this: Array<T>);
  return this.slice(0, count);
}

head.call([1, 2, 3], 10);
head.call(['123'], 20);
@HerringtonDarkholme

This comment has been minimized.

Copy link

commented Mar 4, 2017

@nmn Yes we do need.

It's for library declaration and use site completion. This is quite common for context injection.

function addListener<T: HTMLElement>(elem: T, func: (this: T) => void) {
  // implementation
}
addListener(htmlInputElement , function() {
  this.value // should have this completion
})

Another usage is in library like Vue/backbone.

Vue.extend({
  methods: {
    log() {
      this.instanceProperty // this is injected as Vue instance
    }
  }
})

Without this annotation, it is impossible for library author to provide a good type declaration for automatic completion.

@kazupon

This comment has been minimized.

Copy link

commented Mar 6, 2017

I hope this feature is provided 🙏

@scottbedard

This comment has been minimized.

Copy link

commented Mar 21, 2017

+1 for this feature

@iclanzan

This comment has been minimized.

Copy link
Contributor

commented Feb 16, 2018

Has there been no progress on this yet?

@dmnd

This comment has been minimized.

Copy link
Contributor

commented Feb 16, 2018

@calebmer was looking for people to help implement it a while ago. I'm not sure if anyone started on it. I'd love to do it if I had more time.

@KindWizzard

This comment has been minimized.

Copy link

commented Apr 5, 2018

Any updates on this? :)

@akoppela

This comment has been minimized.

Copy link

commented Jul 30, 2018

@danvk It seems that you're using flow type version of Q.Promise, is it? If so do you mind to share a link to flow typed Q.Pomise library?

@danvk

This comment has been minimized.

Copy link
Contributor

commented Jul 31, 2018

@akoppela https://github.com/hammerlab/pileup.js/blob/0182b225205e52e1489727004d69e84442eafb88/lib/q.js but take note that these are ~3 years old and there may be better ones available elsewhere.

lgeiger added a commit to lgeiger/flowgen that referenced this issue Oct 13, 2018

Remove this annotation in function declarations
flow doesn't have support for [`this` annotation](https://www.typescriptlang.org/docs/handbook/functions.html) in functions: facebook/flow#452

This will result in prettier failing to parse the generated code. This PR removes the this annotation in function declarations.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.