Skip to content

[TS] Improve typing for null #4258

@Freymaurer

Description

@Freymaurer

I have the following react component using the "new" f# null feature:

[<ReactComponent>]
let Test(input: string | null) =
    Html.div [
        match input with
        | null -> prop.text "Input is null"
        | notNull ->
            prop.text (notNull + " from F#")
    ]

Which output the following typescript (fable; 5.0.0-alpha.14):

import { ReactElement } from "react";
import React from "react";
import { HtmlHelper_createElement } from "./src/Feliz/Html.tsx";
import { singleton, delay, toList } from "./fable_modules/fable-library-ts.5.0.0-alpha.14/Seq.js";
import { defaultOf } from "./fable_modules/fable-library-ts.5.0.0-alpha.14/Util.js";
import { singleton as singleton_1 } from "./fable_modules/fable-library-ts.5.0.0-alpha.14/List.js";
import { IReactProperty } from "./src/Feliz/Types.tsx";

export function Test(props: { input: string }): ReactElement {
    const input: string = props.input;
    return HtmlHelper_createElement("div", toList<IReactProperty>(delay<IReactProperty>((): Iterable<IReactProperty> => {
        if (input === defaultOf()) {
            return singleton<IReactProperty>(["children", singleton_1("Input is null")] as [string, any]);
        }
        else {
            const notNull: string = input;
            return singleton<IReactProperty>(["children", singleton_1(notNull + " from F#")] as [string, any]);
        }
    })));
}

From a very naive point of view i would have expected something akin to

export function Test(props: { input: string | null }): ReactElement {

and

if (input === null) {

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions