Arrow function is not compatible with ordinary one

[xfoxfu]

TypeScript Version: 2.4.1

Code

class Component {
  render(): boolean {
    return false;
  }
}
class App extends Component {
  render = () => false;
}

Expected behavior:

Compiles correctly.

Actual behavior:

The compiler reports an error:

test.ts(7,3): error TS2424: Class 'Component' defines instance member function 'render', but extended class 'App' defines it as instance member property.

I know this may be designed, a feature rather than a bug, but such behavior is quite weird.

[RyanCavanaugh]

There are good reasons not to allow the reverse case, but I can't remember why we disallow this. I think it's come up before but will take it up as a suggestion

[xtuc]

An arrow fonction has no prototype or even a name. This is a good reason why they shouldn't have the same type.

[kitsonk]

Also, in the base class, the method is part of the classes prototype. You are overwriting it with a property initialiser that gets desugared in the constructor and isn't actually part of the prototype chain. You end up with differences in own properties at run time, so they are effectively, subtly different, though the shape is the same. At runtime, the shape of the Class.prototype is actually different, though I believe TypeScript includes the shape of properties in the type of the prototype, even though they aren't really there.

I thought you might also get into trouble with super but actually that seems fine.

[RyanCavanaugh]

Easy PR if someone wants to submit one.

[Kingwl]

I would like to work on this one.😅

[Kingwl]

@RyanCavanaugh @kitsonk i have some question

class Component {
  render(): boolean {
    return false;
  }
}
class App extends Component {
  get render () {
    return () => true
  }
}

1. if i can override method with property, could i override method with accessor?
2. could i override property defined in base with method?