1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
|
//// [file.tsx]
import React = require('react')
export interface ClickableProps {
children?: string;
className?: string;
}
export interface ButtonProps extends ClickableProps {
onClick: (k: "left" | "right") => void;
}
export interface LinkProps extends ClickableProps {
goTo: "home" | "contact";
}
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.goTo) {
return this._buildMainLink(props);
}
return this._buildMainButton(props);
}
const b0 = <MainButton {...{onClick: (k) => {console.log(k)}}} extra />; // k has type "left" | "right"
const b2 = <MainButton onClick={(k)=>{console.log(k)}} extra />; // k has type "left" | "right"
const b3 = <MainButton {...{goTo:"home"}} extra />; // goTo has type"home" | "contact"
const b4 = <MainButton goTo="home" extra />; // goTo has type "home" | "contact"
export function NoOverload(buttonProps: ButtonProps): JSX.Element { return undefined }
const c1 = <NoOverload {...{onClick: (k) => {console.log(k)}}} extra />; // k has type any
export function NoOverload1(linkProps: LinkProps): JSX.Element { return undefined }
const d1 = <NoOverload1 {...{goTo:"home"}} extra />; // goTo has type "home" | "contact"
//// [file.jsx]
define(["require", "exports", "react"], function (require, exports, React) {
"use strict";
exports.__esModule = true;
function MainButton(props) {
var linkProps = props;
if (linkProps.goTo) {
return this._buildMainLink(props);
}
return this._buildMainButton(props);
}
exports.MainButton = MainButton;
var b0 = <MainButton {...{ onClick: function (k) { console.log(k); } }} extra/>; // k has type "left" | "right"
var b2 = <MainButton onClick={function (k) { console.log(k); }} extra/>; // k has type "left" | "right"
var b3 = <MainButton {...{ goTo: "home" }} extra/>; // goTo has type"home" | "contact"
var b4 = <MainButton goTo="home" extra/>; // goTo has type "home" | "contact"
function NoOverload(buttonProps) { return undefined; }
exports.NoOverload = NoOverload;
var c1 = <NoOverload {...{ onClick: function (k) { console.log(k); } }} extra/>; // k has type any
function NoOverload1(linkProps) { return undefined; }
exports.NoOverload1 = NoOverload1;
var d1 = <NoOverload1 {...{ goTo: "home" }} extra/>; // goTo has type "home" | "contact"
});
|