JSX元素屬性類型[...]可能不是一個聯合類型

Question

在打字稿2.1，嘗試時執行以下操作：

錯誤TS2600：在編譯時發生

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

的跟隨誤差：JSX元素屬性類型'（{children？：ReactNode;} & AmericanAddress）| （{孩子?: ReactNode;} & CanadianAddress'可能不是一個聯合類型

我想知道這是爲什麼不支持，我哪能做到這一點，而不必過於-組複雜的。 ？屬性來指定

Answer 1

我不知道爲什麼它是不可能的，所有我能找到的是這種由@RyanCavanaugh：

我們真的不正確支持JSX屬性類型是一個 聯合類型

在問題中：Allow JSX element attributes type to be an intersection。

應對這種情況的方法是讓它們的Address子兩個不同的組件：

interface AddressProperties { 
    street: string; 
    country: string; 
} 

interface CanadianAddressProperties extends AddressProperties { 
    postalCode: string; 
} 

interface AmericanAddressProperties extends AddressProperties { 
    zipCode: string; 
} 

abstract class Address<P extends AddressProperties> extends React.Component<P, void> { 
    public render() { 
     return (
      <div className={ this.getClassName() + " address"}> 
       <div><span>Street:</span><span>{ this.props.street }</span></div> 
       <div><span>Country:</span><span>{ this.props.country }</span></div> 
       { } 
      </div> 
     ); 
    } 

    protected abstract getClassName(): string; 
    protected abstract getCountryElements(): JSX.Element | JSX.Element[]; 
} 

class CanadianAddress extends Address<CanadianAddressProperties> { 
    protected getClassName(): string { 
     return "canadian"; 
    } 

    protected getCountryElements(): JSX.Element { 
     return <div><span>Postal Code:</span><span>{ this.props.postalCode }</span></div>; 
    } 
} 

class AmericanAddress extends Address<AmericanAddressProperties> { 
    protected getClassName(): string { 
     return "american"; 
    } 

    protected getCountryElements(): JSX.Element { 
     return <div><span>Zip Code:</span><span>{ this.props.zipCode }</span></div>; 
    } 
} 

如果兩者之間的唯一的變化是zipCode/postalCode那麼它可能是矯枉過正，但如果有更多的差異，那麼把它們分成不同的組件是有意義的。

否則，您需要postalCode和zipCode作爲AddressProperties中的可選項。