React tsx ＆演算子

Question

export type Props = IStateProps & IDispatchProps;
ここの＆がどういう役割か教えてください。

以下ソースです。

export class LogoButton extends React.Component<Props> {
  public static defaultProps: Partial<Props> = {
    type: 'default',
  };

  public render(): JSX.Element {
    const { onClick, logo, label, labelSub, type } = this.props;
    return (
      <div className={`${styles.iconBotton} ${styles[type]}`} onClick={onClick}>
        <Logo type={logo} />
        <label>{label}</label>
        <label>{labelSub}</label>
      </div>
    );
  }
}

export type Props = IStateProps & IDispatchProps;

export interface IStateProps {
  logo: LogoType;
  label: string;
  labelSub?: string;
  type?: 'default' | 'active';
}

export interface IDispatchProps {
  onClick?: () => void;
  onHover?: () => void;
}

Answer 1

& は交差型ですね。Props は IStateProps と IDispatchProps の要素を両方とも持つ型になります。
参考: TypeScriptの合併型と交差型ついて学ぼう

Comments

[riesa]

回答ありがとうございます。勉強になりました。