javascript - Flowtype - how to write declaration for class factories, such as Backbone Models? - Stack Overflow

Extensive googling and reading through Flow docs and examples didn't show any example of a very mon pattern in Javascript - having functions that return classes. A canonical example is Backbone:

var User = Backbone.Model.extend({
  getFullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }
});  


var exampleUser = new User();
exampleUser.set('firstName', 'Johny'); //set() is a method from Backbone.Model
exampleUser.set('lastName', 'Something');
exampleUser.getFullName(); //method ing from User class

In JSDoc, I could annotate the class as follows, with some IDEs being able to figure out a decent autopletion:

/**
 * @class User
 * @augments Backbone.Model
 */
var User = Backbone.Model.extend(/**@lends User.prototype */{
  getFullName: function() {...}
});

Is there any way how to properly annotate this pattern in Flow?

Extensive googling and reading through Flow docs and examples didn't show any example of a very mon pattern in Javascript - having functions that return classes. A canonical example is Backbone:

var User = Backbone.Model.extend({
  getFullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }
});  


var exampleUser = new User();
exampleUser.set('firstName', 'Johny'); //set() is a method from Backbone.Model
exampleUser.set('lastName', 'Something');
exampleUser.getFullName(); //method ing from User class

In JSDoc, I could annotate the class as follows, with some IDEs being able to figure out a decent autopletion:

/**
 * @class User
 * @augments Backbone.Model
 */
var User = Backbone.Model.extend(/**@lends User.prototype */{
  getFullName: function() {...}
});

Is there any way how to properly annotate this pattern in Flow?

• javascript
• backbone.js
• flowtype

Share Follow asked Oct 8, 2015 at 18:59 Maros UrbanecMaros Urbanec 45344 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

/* @flow */

class Model {
    get(name: string): any {}
    set(name: string, value: any): void {}
}

function extend<T>(def: T): Class<Model & T> {
    throw new Error('not implemented')
}

var User = extend({
    getFullName: function() {
        return this.get('firstname') + this.get('lastname')
    }
})

var a = new User

a.get('firstname')
a.getFullName()
// a.notExisting give error

I use intersection type and generic type to express the pattern that 'Given a definition object type T, return a Class that is both Model and T'

This code piles under brew-shipped flow 0.11

---

Below is my personal idea on flow. I have to agree that flow docs is scarce. The best way to learn its feature is probably reading flow's React annotation and flow's source. Flow is based on a sophisticated type inference algorithm, which allows you type-check a program without annotation. So Flow is designed to make you not annotate, and so does its documentation. However, type inference is not so advanced to free one from annotating. You code is an example.