Parser of Typescript declaration files
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.paket #233 : Add web-app to prepare ts2fable online Jul 12, 2018
.vscode Idealy Workflow (#245) Jul 22, 2018
src Add react-native to exports (#253) Jul 23, 2018
test-compile Add synctasks & subscribableevent to auto generated files (#205) Mar 22, 2018
test Add react-native to exports (#253) Jul 23, 2018
tools Fixed 'global variable is not genereted' (#241) Jul 21, 2018
web-app Fix typo (#263) Aug 31, 2018
.gitattributes Update git-attribuites + build.fsx Mar 13, 2018
.gitignore #233 : Add web-app to prepare ts2fable online Jul 12, 2018
LICENSE Initial commit Mar 25, 2017
Nuget.Config typescript.fs created from 2.5.3 Oct 25, 2017
README.md Update README.md Jul 16, 2018
appveyor.yml update version in appveyor Jul 14, 2018
build.fsx Idealy Workflow (#245) Jul 22, 2018
build2.fsx Idealy Workflow (#245) Jul 22, 2018
common.fsx Revert "Fix + Re-activate WebApp.Publish for auto deployment" Aug 31, 2018
dotnet-fake.proj Update fake && fix npm auto-publish when drafting a new release (#223) Apr 16, 2018
fake.cmd Add bootstrap fake + update docs (#188) Mar 13, 2018
fake.sh Add bootstrap fake + update docs (#188) Mar 13, 2018
global.json #233 : Add web-app to prepare ts2fable online Jul 12, 2018
package.json update vscode to 1.1.21 (#260) Aug 31, 2018
paket.dependencies #233 : Add web-app to prepare ts2fable online Jul 12, 2018
paket.lock #233 : Add web-app to prepare ts2fable online Jul 12, 2018
ts2fable.sln add sln to edit from VS 2017 (#210) Mar 23, 2018
yarn.lock update vscode to 1.1.21 (#260) Aug 31, 2018

README.md

ts2fable npm version

Fable parser for TypeScript declaration files.

Usage

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 file and also specify the F# output file. The F# namespace in taken from the output filename. In this example, it is Yargs.

yarn add @types/yargs --dev
ts2fable node_modules/@types/yargs/index.d.ts src/Yargs.fs

You can also use --export(or -e) option to collect from multiple tsfiles

In below sample: All the related ts files in npm packages uifabric and office-ui-fabric-react will be compiled to OfficeReact.fs as a bundle

ts2fable node_modules/office-ui-fabric-react/lib/index.d.ts test-compile/OfficeReact.fs -e uifabric office-ui-fabric-react

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.

Online Version

You can also try out an in-browser version here

Contributing

Succesfull builds on the master branch are uploaded and tagged as next. You can help us test these builds by installing them with:

yarn global add ts2fable@next

Running code from source

Windows:

  • git clone https://github.com/fable-compiler/ts2fable
  • Install all dependencies: fake.cmd run build.fsx

Unix:

  • git clone https://github.com/fable-compiler/ts2fable
  • ./fake.sh run build.fsx

Common to all OS

  • In vscode, press Ctrl+Shift+P > Run Task > WatchTest
  • Add your test in test/fsFileTests.fs and prefix it with mocha only (See below sample)

Sample Test:

only "duplicated variable exports" <| fun _ ->
    let tsPaths = ["node_modules/reactxp/dist/web/ReactXP.d.ts"]
    let fsPath = "test-compile/ReactXP.fs"
    testFsFiles tsPaths fsPath  <| fun fsFiles ->
        fsFiles
        |> getTopVarialbles
        |> List.countBy(fun vb -> vb.Name)
        |> List.forall(fun (_,l) -> l = 1)
        |> equal true
  • Press F5 to debug this test

Conventions

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:

  • 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