TypeScript

Fickl gives TypeScript code two ways in: declaration files that describe compiled JavaScript, and TypeScript output. Its priorities, in order, are correct JavaScript, correct declarations, TypeScript output that compiles, and TypeScript output that is fully typed.

Declaration files

--declaration writes a .d.ts file next to each JavaScript file, describing what it exports. TypeScript code imports the JavaScript and gets the types from the declaration. This is the recommended way to call F# from TypeScript: the JavaScript is the same as without the flag, and the declarations are tested against a strict tsconfig.

type Shape =
    | Circle of radius: float
    | Rect of width: float * height: float

let area shape =
    match shape with
    | Circle r -> System.Math.PI * r * r
    | Rect(w, h) -> w * h

import { Union } from "@fable-org/fable-library-js/Types.js";
import { union_type, float64_type } from "@fable-org/fable-library-js/Reflection.js";

export class Shape extends Union {
    constructor(tag, fields) {
        super();
        this.tag = tag;
        this.fields = fields;
    }
    cases() {
        return ["Circle", "Rect"];
    }
}

export function Shape_$reflection() {
    return union_type("Example1.Shape", [], Shape, () => [[["radius", float64_type]], [["width", float64_type], ["height", float64_type]]]);
}

export function area(shape) {
    if (shape.tag === 1) {
        return shape.fields[0] * shape.fields[1];
    }
    else {
        const r = shape.fields[0];
        return (3.141592653589793 * r) * r;
    }
}

import { Union } from "@fable-org/fable-library-js/Types.js";
import type { float64 } from "@fable-org/fable-library-js/Int32.js";
import type { TypeInfo } from "@fable-org/fable-library-js/Reflection.js";
export type Shape_$union = 
    | Shape<0>
    | Shape<1>
export type Shape_$cases = {
    0: ["Circle", [float64]],
    1: ["Rect", [float64, float64]]
}
export declare class Shape<Tag extends keyof Shape_$cases> extends Union<Tag, Shape_$cases[Tag][0]> {
    constructor(tag: Tag, fields: Shape_$cases[Tag][1]);
    readonly tag: Tag;
    readonly fields: Shape_$cases[Tag][1];
    cases(): string[];
}
export declare function Shape_$reflection(): TypeInfo;
export declare function area(shape: Shape_$union): float64;

dotnet fickl src/App.fsproj -o dist --declaration

TypeScript output

--lang ts compiles each file to TypeScript instead, for projects that type-check or bundle their sources as TypeScript. Every example on this site shows its TypeScript output in the TypeScript tab.

dotnet fickl src/App.fsproj -o src/generated --lang ts

Describing TypeScript types

F# has no words for some TypeScript types, such as keyof T or Partial<T>. Fickl.Core describes them, so a binding can say what the TypeScript side expects:

Types: keyof, Record, valueof, Partial, branded primitives, unknown, [<EmitType>] and enums.
Interfaces: callable interfaces, global and module augmentations, this return types, type guards and labelled tuples.

Edit this page