Побитовый оператор JavaScript с нулем и объектом

У меня есть документы для чтения материалов и я нашел этот синтаксис: anchorEl: null | HTMLElement

Я понятия не имею, для чего это нужно.

Есть идеи?

import React from 'react';
import PropTypes from 'prop-types';
import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import AccountCircle from '@material-ui/icons/AccountCircle';
import Switch from '@material-ui/core/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormGroup from '@material-ui/core/FormGroup';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';

const styles = createStyles({
  root: {
    flexGrow: 1,
  },
  grow: {
    flexGrow: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
});

export interface Props extends WithStyles<typeof styles> {}

export interface State {
  auth: boolean;
  anchorEl: null | HTMLElement;
}

class MenuAppBar extends React.Component<Props, State> {
  state: State = {
    auth: true,
    anchorEl: null,
  };

  handleChangeEvent = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ auth: event.target.checked });
  };

  handleMenu = (event: React.MouseEvent<HTMLElement>) => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    const { classes } = this.props;
    const { auth, anchorEl } = this.state;
    const open = Boolean(anchorEl);

    return (
      <div className = {classes.root}>
        <FormGroup>
          <FormControlLabel
            control = {
              <Switch checked = {auth} onChange = {this.handleChangeEvent} aria-label = "LoginSwitch" />
            }
            label = {auth ? 'Logout' : 'Login'}
          />
        </FormGroup>
        <AppBar position = "static">
          <Toolbar>
            <IconButton className = {classes.menuButton} color = "inherit" aria-label = "Menu">
              <MenuIcon />
            </IconButton>
            <Typography variant = "h6" color = "inherit" className = {classes.grow}>
              Photos
            </Typography>
            {auth && (
              <div>
                <IconButton
                  aria-owns = {open ? 'menu-appbar' : undefined}
                  aria-haspopup = "true"
                  onClick = {this.handleMenu}
                  color = "inherit"
                >
                  <AccountCircle />
                </IconButton>
                <Menu
                  id = "menu-appbar"
                  anchorEl = {anchorEl}
                  anchorOrigin = {{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  transformOrigin = {{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  open = {open}
                  onClose = {this.handleClose}
                >
                  <MenuItem onClick = {this.handleClose}>Profile</MenuItem>
                  <MenuItem onClick = {this.handleClose}>My account</MenuItem>
                </Menu>
              </div>
            )}
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

(MenuAppBar as React.ComponentClass<Props>).propTypes = {
  classes: PropTypes.object.isRequired,
} as any;

export default withStyles(styles)(MenuAppBar);