Method overloading does not work on TSX templates

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.

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);
}

Ryan Cavanaugh (@RyanCavanaugh)

Ryan Cavanaugh (@RyanCavanaugh) it does not. :( - that throws:

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

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.

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

Awesome!

+1

James Gillmore (@faceyspacey)

James Gillmore (@faceyspacey) Drew Wyatt (@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!

Navigation Menu

Repository navigation

Method overloading does not work on TSX templates #9703

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Method overloading does not work on TSX templates #9703

Description

Activity

RyanCavanaugh commented on Jul 13, 2016

drewwyatt commented on Jul 16, 2016

mynameisstephen commented on Aug 17, 2016

RyanCavanaugh commented on Aug 22, 2016

drewwyatt commented on Aug 23, 2016

1 remaining item

faceyspacey commented on Jan 24, 2017

yuit commented on Feb 15, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions