Support flowtype definition for flow-typed (WIP)

[kazupon]

This is a flowtype definition for Vue.js
If this pull request does not need, feel free to close it.

Like a TypeScript, I would like to unite the way of providing these definition files.
Already in the flow directory, as @evan have said in here,
but these definition files are defined that specialized in due to internal develop.
I feel these definition files don't give good development experimence to users, to say the least.
As well as typescript, I hope to provide the official flowtype definitions.

I'm considering the below specs:

• Adding decls directory for flowtype definition
• Put type definitions in the same directory structure as flow-typed
• Testing type definitions with flow-bin (already installed with package.json)
• Support from flowtype version of package.json

[HerringtonDarkholme]

Hi @kazupon , thank you for this contribution.

I'm reporting my experience with integrating Flow with Vue. But I think this might be helpful to you.

(Flow) definition files don't give good development experimence to users

Providing good typing experience would be very hard in flow. Mainly due to flow's inherent expressiveness:

this-type: facebook/flow#452
library augmentation: facebook/flow#396

Without this -type, we cannot define Vue's methods/data option. Without augmentation, we cannot extend Vue's option object (which is a practice quite common in Vue community). These two are simply deal breakers.

Arguably TypeScript definition file does not provide decent experience (for now, will be better after TS2.3). But TS definition serves as a basic ground for library authors like vue-class-component.

Sadly, class component like approach utilizes stage-1 decorator syntax, which flow just ignores now. This simply means flow-definition isn't needed. 😞

Other typing approach like chain-api isn't doable in flow due to this-typing problem stated above.

Generally I would dare to say Flow is (naturally) React biased. It is very hard to integrate other frameworks with it...

[kazupon]

@HerringtonDarkholme
Thank you for your advise!

When I'm implementing flow type definition of vue, I encountered to it.
In flow version, I feel so difficulty.
Flow and Vue API not are very compatible. 😞
In this reason, I'll pend this PR once.

[StreetStrider]

@kazupon @HerringtonDarkholme, hello. I'm kinda confused on this topic. I'm seeing some flowtype defs in /flow directory of the vue (as well as vue-router) project. But in the mean time this PR is pended. What's the status of current definitions?

[kazupon]

@StreetStrider
Sorry to confuse you. 🙇

Vue core or Vue official plugins have some flowtype definitions, But these are for internal developement. in this reason, I'll try to improve, As I have mentioned in the above, I have encountered difficulties.

[LinusBorg]

@StreetStrider The definitions in the /flow directory of the vue and vue-router repositories are used during delevopment of those libraries - they offer typings of the internal APIs, and are not suited to be used by the users of those libraries because the public APIs are not sufficiently typed as of now.

As @HerringtonDarkholme explained, that is hard to do currently, without a possibilty to type this in Flow.

[StreetStrider]

I see. 🤔 the main obstacle is Flow does not allow determine this type as a part of function signature and Vue rely (heavily) on it. Why not just omit it? The rest of the signature will be under type control. This isn't ideal typedef but it is better than nothing at all.

In light of this extensively used in Vue architecture this would look worthless (defs will be weak), but I would satisfy any Flowtype defs for Vue becaue of facebook/flow#1548. tl;dr: you can't both import module and flow-ignore it, you'll get error in either case. I personally use stub for Vue which is created by flow-typed. It silences all errors but effectively checks nothing.

[nickmessing]

@kazupon, any updates on this? I'd enjoy using Flow type checking with Vue but it actually looks like they are interested only in React ecosystem atm.

[sobolevn]

This would be a nice feature indeed.

[pichillilorenzo]

@kazupon any news about that? Thanks!

[HerringtonDarkholme]

Until this-type: facebook/flow#452 and library augmentation: facebook/flow#396 are supported in Flow hardly can we take any further action.

[sobolevn]

@kazupon what about providing partial flow support for now? Is it possible?

I know, that we can not extend existing library definitions, but still. I had some experiments to be able to annotate vue + vuex. I came up with something like this (oversimplifying here):

// @flow

interface Vue {
  $isServer: boolean;
  $on(event: string, callback: Function): any;
}

interface Vuex$Vue {
  $store: Object;
}

class MyComponent implements Vue, Vuex$Vue {
  $isServer = false
  $store = {}
  
  $on (event: string, callback: Function) {
  	callback(event)
  }
}

Link to playground: https://flow.org/try/#0PTAEAEDMBsHsHcBQiCWA7ALgUwE6QIYDGWoAagK4kDeiooAJCgM4DKuAbrgFygBGssaFnxoA3LQaw0ACiydMPJhhzoA5gBpQhfNGi8iAax4AxcmkIYUUgJQ8RAT3EBfZOmx4iJClgAe9b6A0dPRKsDhYPADyvABWWBbOyITQ+ExMoACy9gDCsAC2AA5SWJigKIVCeSUY6d6a3n4BQQzMbDicOKAAvKAE0ExYEiEYYSQ9VC50Q1KgsvIYispqmtq6+oRGoKbmljaBEgCQq3qGc9XWEi5OQA

You can join me with my attempts here: https://github.com/sobolevn/vue-flow-typed

[yyx990803]

Closing as we will be focusing on TS for userland type support.