Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ts2fable with all npm packages installed. Try it out:

var ts2fable = require("ts2fable")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ts2fable v0.3.0

TypeScript definition files parser for fable-compiler

ts2fable npm version

Fable parser for TypeScript declaration files.


Install it with yarn or npm. With yarn it is:

yarn global add ts2fable

With npm it is:

npm install -g ts2fable

Run the ts2fable command on a TypeScript declaration file and also specify the F# output file. The F# namespace in taken from the output filename. In this example, it is Fable.Import.React.

yarn add @types/react --dev
ts2fable node_modules/@types/react/index.d.ts Fable.Import.React.fs

You can find more information about how to interact with JavaScript from F# here. Please note the parser is not perfect and some tweaking by hand may be needed. Please submit bugs as issues on GitHub.


git clone

Please use yarn so you will use the exact same versions of everything that was used during development

cd src
dotnet restore
dotnet fable yarn-build
node ../dist/ts2fable.js ../node_modules/typescript/lib/typescript.d.ts bin/Fable.Import.TypeScript.fs

You can also have it watch the files with:

dotnet fable yarn-watch


Some JavaScript/TypeScript features have no direct translation to F#. Here is a list of common workarounds adopted by the parser to solve these problems:

  • Module methods: Module functions in F# have several limitations (no overload, optional or rest parameters). To overcome this, the parser wraps module methods in a dummy static typed named Globals. For example:
module ReactDom =
    type [<Import("react-dom")>] Globals =
        static member render(element: DOMElement<'P>, container: Element, ?callback: Func<Element, obj>): Element = jsNative

Note the Import attribute is on the Globals value, not the module.

  • Erased unions: TypeScript union types work differently from F# and its only purpose is to specify the types allowed for a function argument. In F# they are translated as erased unions: they're checked at compiled time but they'll be removed from the generated JS code.
type CanvasRenderingContext2D =
    abstract fillStyle: U3<string, CanvasGradient, CanvasPattern> with get, set

let ctx: CanvasRenderingContext2D = failwith "dummy"
ctx.fillStyle <- U3.Case1 "#FF0000"
  • Constructor functions: In JS any function can become a constructor just by calling it with the new keyword. In the parsed files, interfaces with this capability will have a Create method attached:
type CanvasRenderingContext2DType =
    abstract prototype: CanvasRenderingContext2D with get, set
    [<Emit("new $0($1...)")>] abstract Create: unit -> CanvasRenderingContext2D
  • Callable interfaces: In the same way, JS functions are just objects which means applying arguments directly to any object is legal in JS. To convey, the parser attaches an Invoke method to callable interfaces:
type Express =
    inherit Application
    abstract version: string with get, set
    abstract application: obj with get, set
    [<Emit("$0($1...)")>] abstract Invoke: unit -> Application
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free