This type is incompatible with some incompatible instantiation

[salujaharkirat]

I was trying following code.

/* @flow */
class PolyC<X> {
  x: X;
  constructor(x) { this.x = x; }
}

class abc extends PolyC<number> {
}


const x=new abc(5)

console.log(x)

Its a pretty simple code in which I create a polymorphic class and just extend giving it type number . But i continuously get following error

 14: const x=new abc(5)
             ^^^^^^^^^^ constructor call
  4:   constructor(x) { this.x = x; }
                                 ^ number. This type is incompatible with
  2: class PolyC<X> {
           ^^^^^ some incompatible instantiation of `X`

It should work I feel? Can someone please tell if I am going wrong or something needs to be fixed?

[nishp1]

I am also seeing same error for

Flowtype try link: https://flowtype.org/try/#0PQKgBAAgZgNg9gdzCYAoVBLAtgBzgJwBcwAlAUwEMBjQgGjAG8wBhOXOAOzI+IF8wo+NmADk+SjRHpCATxxkwAIQoBnMgAUhOFWAC8jVGCNgOFLGQBcYFYXwYOAc1S9pchcrUBlQhUJkAPAAqAHx6BsZgZPhC+FY2do60hsYAbhQwAK6WYAD8gUkuqFQwqjoeAZpw2vQAaqFkAB5+HAAmOqzsXDz+FBwy9OWV2mAAZGBDKgOqZN6+AXWhDMlGNnNhSxERUTFWIiJJm6npWVYcGTAwB8YuEeKtUQAUAJThh2DihBn4HGD+LRgpYKEAAWGBUADocFoIaZzP5gP9AcswC5CqhZPIwABRJrcFpkFoTdbIqBwOBxWz2BwFdDFUrY3H3FrlSKMtpKab+HHNfGE6H0eJUxbIu74-BgZ6vQ4fL4-P4AoGgiFQqowswBBEK5GooA

// @flow

import React, { Component } from 'react'

type BaseProps = {
    name: string
}

type BaseState<T> = {
    error: string,
    value: ?T,
}

class Base<Props, V> extends Component<any, BaseProps & Props, BaseState<V>> {
    state = {
        error: '',
        value: null,
    }
    render() {
        return <div>this.props.name</div>
    }
}


type ExtendedProps = {
    foo: string,
}

class ExtendedBase extends Base<ExtendedProps, string> {
    render () {
        return <div>this.props.name</div>
    }
}

14: class Base<Props, V> extends Component<any, BaseProps & Props, BaseState> {
^ V. This type is incompatible with
14: class Base<Props, V> extends Component<any, BaseProps & Props, BaseState> {
^^^^ some incompatible instantiation of V

[ryyppy]

@jinxac Try this: https://flowtype.org/try/#0PQKgBAAgZgNg9gdzCYAoAxjAhgZx2ABThgE8BhAHgA0A+MAb1TDAA8AuMKgbibHTgB2OAC4AnAK7phcUQAp2nAJQMwwgBYBLHADoWYALysuYAL6ozGbHjBYARujABTFsMcCAJviKlKA8QFtbR1E6RgsMQRFWAzABRyQ7dFkAVkVUCKFiR214AHN5RSA

[ryyppy]

@nishp1 Maybe try something like this:
https://flowtype.org/try/#0PQKgBAAgZgNg9gdzCYAoVBLAtgBzgJwBcwAlAUwEMBjQgGjAG8wBhOXOAOzI+IF8wo+NmADk+SjRHpCATxxkwAIQoBnMgAUhOFWAC8jVGCNgOFLGQBcYFYXwYOAc1S9pchcrUBlQhUJkAPAAqAHx6BsZgZPhC+FY2do60hsYAbhQwAK6WYAD8gUkuqFQwqjoeAZpw2vQAaqFkAB5+HAAmOqzsXDz+FBwy9OWV2mAAZGBDKgOqZN6+AXWhDMkAkDhaKlaD66Pj6wDcyUY2c5vTs37+dWFLERFRMVYiIkm3qelZVhwZMDAvxi4RcStKIACgAlOFXmAQYQABYYFQAOmOfkR9wIcVs9gcYIOr2WMPhSJRZERaUy2RyNVxh1u4kIGXwHDA-haGBSwThCMRayqSNM5n8wDZHNpLkKqFk8jAAFEmtwWmQWhNrrSoHA4JiEg4CuhiqVZfLgS1ypEjW0lNN-HLmorlet6PFsYtaUDFfhoRCbrcCVziT5UejYtYsY4afjCdySWT3pSnWG8VD6Yzmaz2ZyiTz1oiBQFhemxc4gA

[nishp1]

Thanks @ryyppy. Defining type of state on the class seems to do the trick. Is that always required? Or only with generics?

[ryyppy]

For classes, I really really recommend to always add the class property types state and props... not only for flow, but also for your fellow developers :-)

EDIT: Also, I really urge you to not do subclassing like this... use higher order components instead, it makes the code much more reasonable and easier to extend!

[ryyppy]

@jinxac Anything else left to discuss? Or can we close this issue?

[nishp1]

Thanks again @ryyppy. Just messing around with generics at this point. Agreed about using HOCs.

[salujaharkirat]

@ryyppy this code looks exactly similar to mine, but with one difference.

I see in my code constructor is defined as

constructor(x) { this.x = x; }

I saw the above in polymorphic classes docs. In docs its

class PolyC<X> {
  x: X;
  y: number;
  constructor(x) { this.x = x; }
  foo() { return this.x; }
  bar(y) { this.y = y; }
}

But if i add the annotation in the constructor parameter, this seems to be work fine.

constructor(x:X) { this.x = x; }

[salujaharkirat]

Yes I am closing this. raised a pull request in flow repository for this issue.