Typescript: Method overloading does not work on TSX templates

[drewwyatt]

TypeScript Version: 1.8.10
Code

import * as React from 'react';
import { Link } from 'react-router';

export interface ClickableProps {
    children?: string;
    className?: string;
}

export interface ButtonProps extends ClickableProps {
    onClick(event?: Event): void;
}

export interface LinkProps extends ClickableProps {
    to: string;
}

export function MainButton(buttonProps: ButtonProps): JSX.Element;
export function MainButton(linkProps: LinkProps): JSX.Element;
export function MainButton(props: ButtonProps | LinkProps): JSX.Element {
    const linkProps = props as LinkProps;
    if(linkProps.to) {
        return this._buildMainLink(props);
    }

    return this._buildMainButton(props);
}

function _buildMainButton({ onClick, children, className }: ButtonProps): JSX.Element {
    return(<button className={className} onClick={onClick}>{ children || 'MAIN BUTTON'}</button>);  
}

function buildMainLink({ to, children, className }: LinkProps): JSX.Element {
    return (<Link to={to}><button className={className}>{ children || 'MAIN BUTTON'}</button></Link>    );
}

/**
 * This works
 */

MainButton({ to: 'floop' }); // no errors
MainButton({ onClick: () => {} }); // no errors
MainButton(); // throws expected errors

/**
 * This does NOT work
 */

function buildSomeElement(): JSX.Element {
    return (
        <MainButton to='/some/path'>GO</MainButton>
    );
}

Expected behavior:

I would expect the buildSomeElement() function to not throw an error because the "to" attribute satisfies the second signature of the overloaded MainButton function (like what happens when this is called as a function and not used as a TSX element).

Actual behavior:

The buildSomeElement() function throws an error expecting an onClick attribute.

[RyanCavanaugh]

Does this work if the function is declared like so (without the explicit signatures)?

export function MainButton(props: ButtonProps | LinkProps): JSX.Element {
    const linkProps = props as LinkProps;
    if(linkProps.to) {
        return this._buildMainLink(props);
    }

    return this._buildMainButton(props);
}

[drewwyatt]

@RyanCavanaugh it does not. :( - that throws:

Property 'to' does not exist on type 'IntrinsicAttributes & (ButtonType | LinkType)'

[mynameisstephen]

It looks like only the first overloaded method is being evaluated. Moving

export function MainButton(linkProps: LinkProps): JSX.Element;

above

export function MainButton(buttonProps: ButtonProps): JSX.Element;

works as expected.

[RyanCavanaugh]

This is actually rather complex but we're going to look at some targeted fix (mostly this example specifically and top-level union types in non-SFCs) in 2.1

[drewwyatt]

Awesome!

[faceyspacey]

+1

[yuit]

@faceyspacey @drewwyatt the fix is now in master....we will now use similar overload resolution logic to figure out SFC. Give it a try and let us know!