How to inherit?

[goswinr]

TS can inherit interfaces, F# not.
This can be bypassed by creating a separate module that has classes of the same name:

Generated code from Types.Web :

open Fable.Core

/// All classes in this module are empty.
/// They are only used to allow inheriting from types defined as interface.
/// Use this module when you need to inherit from type that is only defined as an interface.
[<RequireQualifiedAccess>] // don't open this. it would shadow the interfaces
module Inheritable =
    

    /// This is NOT a Browser.Types.HTMLElement !
    /// It is just an empty class with the same name.
    /// It used only for inheriting the Browser.Types.HTMLElement interfaces in F#.
    /// Use like: ' type [<AttachMembers>] MyClass() = inherit Inheritable.HTMLElement()'
    /// Then inside the class you can get the current instance via 'base.this' 
    [<Global>]    
    type HTMLElement() = 

        [<Global>]
        member _.this : Browser.Types.HTMLElement = 
            JsInterop.emitJsExpr () "this" 

In user code a Web Component can be made like this:

open Fable.Core

[<AttachMembers>] 
type MyWebComponent() =
    inherit Inheritable.HTMLElement()     
    let myElem = base.this // typed as Browser.Types.HTMLElement not Inheritable.HTMLElement

this gnerates:

  export class MyWebComponent extends HTMLElement {
      constructor() {
          super();
          const myElem = this;
      }
  }

see REPL

[MangelMaxime]

This is an interesting idea. 👍

Could you please provide the TypeScript snippet that correspond to what we are discussing? This is because it helps visualise what the TypeScript code is and how each element should transformed into F#.

Does this means that for each interface we need to generate a corresponding Inheritable type? If yes, is there situation where we don't want to?

If I understand correctly, this means that Browser.Types.HTMLElement can still inherit from mutile interface because it is an interface.

And the Inheritable types are there just for specialisation for example when using Web Component?

When using Web Component (not limited to), is there cases where we want to inherit from several element or is it always only one?

[goswinr]

Yes! You are right. This applies to any interface. On your last question, I think JS class can only inherit from one class. (I will add some more snippets later..)

[MangelMaxime]

Something I just thought, is that because of the line JsInterop.emitJsExpr () "this" then generated code is not a pure binding (it contains code).

Luckily using the following:

[<Global>]
member _.this : Browser.Types.HTMLElement = 
	nativeOnly

generates the same code and means that we have a pure binding.

Having pure binding is important because otherwise, you need to include the F# files in the fable folder, which means that Fable will use the sources files instead of the DLL for the compilation. Using the DLL is much faster because the F# compiler has less to do.