2017-11-06

ts2fable 0.2.0 written in F#

Three weeks after publishing my last blog post where I accessed the TypeScript API from Fable, I'm happy to announce ts2fable 0.2.0 has been published to npmjs.com. I rewrote the Node app in F# using Fable. It uses bindings to the TypeScript API that I bootstrapped while implementing it. ts2fable uses a Fable.Import.TypeScript.fs that it generated. The entire TypeScript API is available from Fable apps now.

Two nice changes included in this release are:

  • F# function signatures are generated instead of System.Func delegates
  • string based TypeScript enums are now correctly mapped
iziToast was one of the libraries used to test this release. Here are the minimal additions to the Fable Getting Started to import its bindings and add an example.

Install Fable Template

You can install or update your Fable templates by doing:

dotnet new -i Fable.Template

This downloaded the latest Fable.Template to my dotnet cli 2.0.0. I found fable.template.1.2.5.nupkg in %userprofile%\.templateengine\dotnetcli\v2.0.0\packages.

With the latest template installed, just create a new directory and then a new project from the template.

C:\Users\camer\fs> md izitoast-demo
C:\Users\camer\fs> cd izitoast-demo
C:\Users\camer\fs\izitoast-demo> dotnet new fable
The template "Simple Fable App" was created successfully.
C:\Users\camer\fs\izitoast-demo> yarn install

Update the .NET Dependencies

C:\Users\camer\fs\izitoast-demo> .\.paket\paket.exe update

Restore the .NET Dependencies

C:\Users\camer\fs\izitoast-demo> cd src
C:\Users\camer\fs\izitoast-demo> mv .\izitoast-demo.fsproj .\izitoast_demo.fsproj
C:\Users\camer\fs\izitoast-demo\src> dotnet restore

I had to switch the dashes with underscores for it to work.

Start Fable

C:\Users\camer\fs\izitoast-demo\src> dotnet fable yarn-run start

The unchanged sample should be running at  http://localhost:8080/.

Add iziToast

C:\Users\camer\fs\izitoast-demo> yarn add izitoast
C:\Users\camer\fs\izitoast-demo> yarn global add ts2fable
C:\Users\camer\fs\izitoast-demo> ts2fable node_modules/izitoast/dist/izitoast/izitoast.d.ts src/Fable.Import.IziToast.fs

Start Coding

Visual Studio Code with Ionide installed is highly recommended. That is what I used to make ts2fable 0.2. Start VS Code for this project by running:

C:\Users\camer\fs\izitoast-demo> code .

Here is a gist with all the files I changed. I borrowed and translated from a couple of the iziToast examples to create App.fs:

App.fs loading ...


The Fable.Import.IziTast.fs bindings were generated from the izitoast.d.ts that ships with izitoast. 

Fable.Import.IziToast.fs loading ...


izitoast.d.ts loading ...

What is Next

If you think the binding should be generated a bit differently, please file an issue. There are a few issues currently marked for 0.3.0. It would be really nice to import the comments. There are TypeScript generators for both Swagger and gRPC. It would be cool if those outputs could be used easily from Fable using ts2fable.

Looking for a Job

I am looking for a job that I can do remotely. I am in Latin America for the next six months and currently plan to head back to Texas after. I've done this work because I enjoy working with F# and I'd really like to continue doing so professionally. This is a good example of what I can do. Please do reach out on LinkedIn or elsewhere if you know of anyone hiring remotely with F#.