TypeScript/tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload5.tsx
2017-01-18 15:16:49 -08:00

62 lines
No EOL
2 KiB
TypeScript

// @filename: file.tsx
// @jsx: preserve
// @module: amd
// @noLib: true
// @libFiles: react.d.ts,lib.d.ts
import React = require('react')
export interface ClickableProps {
children?: string;
className?: string;
}
export interface ButtonProps extends ClickableProps {
onClick: React.MouseEventHandler<any>;
}
export interface LinkProps extends ClickableProps {
to: string;
}
export interface HyphenProps extends ClickableProps {
"data-format": string;
}
let obj0 = {
to: "world"
};
let obj1 = {
children: "hi",
to: "boo"
}
let obj2 = {
onClick: ()=>{}
}
let obj3 = undefined;
export function MainButton(buttonProps: ButtonProps): JSX.Element;
export function MainButton(linkProps: LinkProps): JSX.Element;
export function MainButton(hyphenProps: HyphenProps): JSX.Element;
export function MainButton(props: ButtonProps | LinkProps | HyphenProps): JSX.Element {
const linkProps = props as LinkProps;
if(linkProps.to) {
return this._buildMainLink(props);
}
return this._buildMainButton(props);
}
// Error
const b0 = <MainButton to='/some/path' onClick={(e)=>{}}>GO</MainButton>; // extra property;
const b1 = <MainButton onClick={(e: any)=> {}} {...obj0}>Hello world</MainButton>; // extra property;
const b2 = <MainButton {...{to: "10000"}} {...obj2} />; // extra property
const b3 = <MainButton {...{to: "10000"}} {...{onClick: (k) => {}}} />; // extra property
const b4 = <MainButton {...obj3} to />; // Shoudld erro because Incorrect type; but attributes are any so everything is allowed
const b5 = <MainButton {...{ onclick(){} }} />; // Spread doesn't retain method declaration
const b6 = <MainButton {...{ onclick(){} }} children={10} />; // incorrect type for optional attribute
const b7 = <MainButton {...{ onclick(){} }} children="hello" className />; // incorrect type for optional attribute
const b8 = <MainButton data-format />; // incorrect type for specified hyphanted name