TypeScript Version: 2.1.1
Code
As seen here: http://stackoverflow.com/questions/41682619/jsx-element-attributes-type-may-not-be-a-union-type/41683341#41683341.
// address.tsx
...
interface Address {
street: string;
country: string;
}
interface CanadianAddress extends Address {
postalCode: string;
}
interface AmericanAddress extends Address {
zipCode: string;
}
type Properties = AmericanAddress | CanadianAddress;
function isAmerican(address: Properties) address is AmericanAddress {
return 'zipCode' in address;
}
export class Address extends React.Component<Properties, void> {
public render() {
let isAmerican = isAmerican(this.props.address);
...
}
}
// map.tsx
...
let rootDiv = document.createElement('root')l
ReactDOM.render(<Address postalCode='T1B 0L3' />, rootDiv);Expected behavior:
Should be able to specify a union type for a React Component's properties generic variable.
Actual behavior:
error TS2600: JSX element attributes type '({ children?: ReactNode; } & AmericanAddress) | ({ children?: ReactNode; } & CanadianAddress' may not be a union type.
Clearly this is an anticipated use case, is there a specific reason why this can't be done, and if so, is there any sane way to get around this? Or do I simply need to use optional attributes in a single interface with custom error logic inside the component to disallow both zipCode and postalCode being specified at the same time?
TypeScript Version: 2.1.1
Code
As seen here: http://stackoverflow.com/questions/41682619/jsx-element-attributes-type-may-not-be-a-union-type/41683341#41683341.
Expected behavior:
Should be able to specify a union type for a React Component's properties generic variable.
Actual behavior:
Clearly this is an anticipated use case, is there a specific reason why this can't be done, and if so, is there any sane way to get around this? Or do I simply need to use optional attributes in a single interface with custom error logic inside the component to disallow both
zipCodeandpostalCodebeing specified at the same time?