Conform more of the codebase to strictNullChecks (#10358

* Conform more of the codebase to `strictNullChecks`

* Fix types

* Iterate

* Iterate

src/components/views/auth/EmailField.tsx

@@ -21,7 +21,7 @@ import { _t, _td } from "../../../languageHandler";
 import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
 import * as Email from "../../../email";
 
-interface IProps extends Omit<IInputProps, "onValidate"> {
+interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     id?: string;
     fieldRef?: RefCallback<Field> | RefObject<Field>;
     value: string;

src/components/views/auth/PassphraseConfirmField.tsx

@@ -20,7 +20,7 @@ import Field, { IInputProps } from "../elements/Field";
 import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
 import { _t, _td } from "../../../languageHandler";
 
-interface IProps extends Omit<IInputProps, "onValidate" | "label"> {
+interface IProps extends Omit<IInputProps, "onValidate" | "label" | "element"> {
     id?: string;
     fieldRef?: RefCallback<Field> | RefObject<Field>;
     autoComplete?: string;

src/components/views/auth/PassphraseField.tsx

@@ -23,7 +23,7 @@ import withValidation, { IFieldState, IValidationResult } from "../elements/Vali
 import { _t, _td } from "../../../languageHandler";
 import Field, { IInputProps } from "../elements/Field";
 
-interface IProps extends Omit<IInputProps, "onValidate"> {
+interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     autoFocus?: boolean;
     id?: string;
     className?: string;

src/components/views/context_menus/MessageContextMenu.tsx

@@ -179,7 +179,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
 
     private isPinned(): boolean {
         const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
-        const pinnedEvent = room.currentState.getStateEvents(EventType.RoomPinnedEvents, "");
+        const pinnedEvent = room?.currentState.getStateEvents(EventType.RoomPinnedEvents, "");
         if (!pinnedEvent) return false;
         const content = pinnedEvent.getContent();
         return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
@@ -389,7 +389,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             timelineRenderingType === TimelineRenderingType.ThreadsList;
         const isThreadRootEvent = isThread && mxEvent?.getThread()?.rootEvent === mxEvent;
 
-        let resendReactionsButton: JSX.Element;
+        let resendReactionsButton: JSX.Element | undefined;
         if (!mxEvent.isRedacted() && unsentReactionsCount !== 0) {
             resendReactionsButton = (
                 <IconizedContextMenuOption
@@ -400,7 +400,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let redactButton: JSX.Element;
+        let redactButton: JSX.Element | undefined;
         if (isSent && this.state.canRedact) {
             redactButton = (
                 <IconizedContextMenuOption
@@ -411,7 +411,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let openInMapSiteButton: JSX.Element;
+        let openInMapSiteButton: JSX.Element | undefined;
         const shareableLocationEvent = getShareableLocationEvent(mxEvent, cli);
         if (shareableLocationEvent) {
             const mapSiteLink = createMapSiteLinkFromEvent(shareableLocationEvent);
@@ -430,7 +430,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let forwardButton: JSX.Element;
+        let forwardButton: JSX.Element | undefined;
         const forwardableEvent = getForwardableEvent(mxEvent, cli);
         if (contentActionable && forwardableEvent) {
             forwardButton = (
@@ -442,7 +442,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let pinButton: JSX.Element;
+        let pinButton: JSX.Element | undefined;
         if (contentActionable && this.state.canPin) {
             pinButton = (
                 <IconizedContextMenuOption
@@ -462,7 +462,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             />
         );
 
-        let unhidePreviewButton: JSX.Element;
+        let unhidePreviewButton: JSX.Element | undefined;
         if (eventTileOps?.isWidgetHidden()) {
             unhidePreviewButton = (
                 <IconizedContextMenuOption
@@ -473,7 +473,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let permalinkButton: JSX.Element;
+        let permalinkButton: JSX.Element | undefined;
         if (permalink) {
             permalinkButton = (
                 <IconizedContextMenuOption
@@ -493,7 +493,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let endPollButton: JSX.Element;
+        let endPollButton: JSX.Element | undefined;
         if (this.canEndPoll(mxEvent)) {
             endPollButton = (
                 <IconizedContextMenuOption
@@ -504,7 +504,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let quoteButton: JSX.Element;
+        let quoteButton: JSX.Element | undefined;
         if (eventTileOps && canSendMessages) {
             // this event is rendered using TextualBody
             quoteButton = (
@@ -517,7 +517,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         }
 
         // Bridges can provide a 'external_url' to link back to the source.
-        let externalURLButton: JSX.Element;
+        let externalURLButton: JSX.Element | undefined;
         if (
             typeof mxEvent.getContent().external_url === "string" &&
             isUrlPermitted(mxEvent.getContent().external_url)
@@ -540,7 +540,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let collapseReplyChainButton: JSX.Element;
+        let collapseReplyChainButton: JSX.Element | undefined;
         if (collapseReplyChain) {
             collapseReplyChainButton = (
                 <IconizedContextMenuOption
@@ -551,7 +551,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let jumpToRelatedEventButton: JSX.Element;
+        let jumpToRelatedEventButton: JSX.Element | undefined;
         const relatedEventId = mxEvent.getWireContent()?.["m.relates_to"]?.event_id;
         if (relatedEventId && SettingsStore.getValue("developerMode")) {
             jumpToRelatedEventButton = (
@@ -563,7 +563,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let reportEventButton: JSX.Element;
+        let reportEventButton: JSX.Element | undefined;
         if (mxEvent.getSender() !== me) {
             reportEventButton = (
                 <IconizedContextMenuOption
@@ -574,7 +574,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let copyLinkButton: JSX.Element;
+        let copyLinkButton: JSX.Element | undefined;
         if (link) {
             copyLinkButton = (
                 <IconizedContextMenuOption
@@ -594,7 +594,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let copyButton: JSX.Element;
+        let copyButton: JSX.Element | undefined;
         if (rightClick && getSelectedText()) {
             copyButton = (
                 <IconizedContextMenuOption
@@ -606,7 +606,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let editButton: JSX.Element;
+        let editButton: JSX.Element | undefined;
         if (rightClick && canEditContent(mxEvent)) {
             editButton = (
                 <IconizedContextMenuOption
@@ -617,7 +617,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let replyButton: JSX.Element;
+        let replyButton: JSX.Element | undefined;
         if (rightClick && contentActionable && canSendMessages) {
             replyButton = (
                 <IconizedContextMenuOption
@@ -628,7 +628,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let replyInThreadButton: JSX.Element;
+        let replyInThreadButton: JSX.Element | undefined;
         if (
             rightClick &&
             contentActionable &&
@@ -639,7 +639,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             replyInThreadButton = <ReplyInThreadButton mxEvent={mxEvent} closeMenu={this.closeMenu} />;
         }
 
-        let reactButton;
+        let reactButton: JSX.Element | undefined;
         if (rightClick && contentActionable && canReact) {
             reactButton = (
                 <IconizedContextMenuOption
@@ -651,7 +651,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let viewInRoomButton: JSX.Element;
+        let viewInRoomButton: JSX.Element | undefined;
         if (isThreadRootEvent) {
             viewInRoomButton = (
                 <IconizedContextMenuOption
@@ -662,7 +662,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let nativeItemsList: JSX.Element;
+        let nativeItemsList: JSX.Element | undefined;
         if (copyButton || copyLinkButton) {
             nativeItemsList = (
                 <IconizedContextMenuOptionList>
@@ -672,7 +672,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             );
         }
 
-        let quickItemsList: JSX.Element;
+        let quickItemsList: JSX.Element | undefined;
         if (editButton || replyButton || reactButton) {
             quickItemsList = (
                 <IconizedContextMenuOptionList>
@@ -703,12 +703,12 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             </IconizedContextMenuOptionList>
         );
 
-        let redactItemList: JSX.Element;
+        let redactItemList: JSX.Element | undefined;
         if (redactButton) {
             redactItemList = <IconizedContextMenuOptionList red>{redactButton}</IconizedContextMenuOptionList>;
         }
 
-        let reactionPicker: JSX.Element;
+        let reactionPicker: JSX.Element | undefined;
         if (this.state.reactionPickerDisplayed) {
             const buttonRect = (this.reactButtonRef.current as HTMLElement)?.getBoundingClientRect();
             reactionPicker = (

src/components/views/dialogs/devtools/SettingExplorer.tsx

@@ -64,7 +64,7 @@ interface ICanEditLevelFieldProps {
 }
 
 const CanEditLevelField: React.FC<ICanEditLevelFieldProps> = ({ setting, roomId, level }) => {
-    const canEdit = SettingsStore.canSetValue(setting, roomId, level);
+    const canEdit = SettingsStore.canSetValue(setting, roomId ?? null, level);
     const className = canEdit ? "mx_DevTools_SettingsExplorer_mutable" : "mx_DevTools_SettingsExplorer_immutable";
     return (
         <td className={className}>

src/components/views/directory/NetworkDropdown.tsx

@@ -44,7 +44,7 @@ const validServer = withValidation<undefined, { error?: MatrixError }>({
             // check if we can successfully load this server's room directory
             await MatrixClientPeg.get().publicRooms({
                 limit: 1,
-                server: value,
+                server: value ?? undefined,
             });
             return {};
         } catch (error) {

src/components/views/elements/AccessibleButton.tsx

@@ -14,7 +14,7 @@
  limitations under the License.
  */
 
-import React, { HTMLAttributes, InputHTMLAttributes, ReactHTML, ReactNode } from "react";
+import React, { HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
 import classnames from "classnames";
 
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
@@ -91,7 +91,7 @@ export interface IAccessibleButtonProps extends React.InputHTMLAttributes<Elemen
  * @returns {Object} rendered react
  */
 export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>({
-    element,
+    element = "div" as T,
     onClick,
     children,
     kind,
@@ -169,7 +169,6 @@ export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>(
 }
 
 AccessibleButton.defaultProps = {
-    element: "div" as keyof ReactHTML,
     role: "button",
     tabIndex: 0,
 };

src/components/views/elements/AppPermission.tsx

@@ -61,8 +61,6 @@ export default class AppPermission extends React.Component<IProps, IState> {
 
         // Set all this into the initial state
         this.state = {
-            widgetDomain: null,
-            isWrapped: null,
             roomMember,
             ...urlInfo,
         };

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -33,7 +33,8 @@ export function getDesktopCapturerSources(): Promise<Array<DesktopCapturerSource
         },
         types: ["screen", "window"],
     };
-    return PlatformPeg.get().getDesktopCapturerSources(options);
+    const plaf = PlatformPeg.get();
+    return plaf ? plaf?.getDesktopCapturerSources(options) : Promise.resolve<DesktopCapturerSource[]>([]);
 }
 
 export enum Tabs {

src/components/views/elements/DialogButtons.tsx

@@ -69,7 +69,7 @@ export default class DialogButtons extends React.Component<IProps> {
     };
 
     private onCancelClick = (event: React.MouseEvent): void => {
-        this.props.onCancel(event);
+        this.props.onCancel?.(event);
     };
 
     public render(): React.ReactNode {
@@ -77,9 +77,9 @@ export default class DialogButtons extends React.Component<IProps> {
         if (this.props.primaryButtonClass) {
             primaryButtonClassName += " " + this.props.primaryButtonClass;
         }
-        let cancelButton;
 
-        if (this.props.cancelButton || this.props.hasCancel) {
+        let cancelButton: JSX.Element | undefined;
+        if (this.props.hasCancel) {
             cancelButton = (
                 <button
                     // important: the default type is 'submit' and this button comes before the
@@ -95,7 +95,7 @@ export default class DialogButtons extends React.Component<IProps> {
             );
         }
 
-        let additive = null;
+        let additive: JSX.Element | undefined;
         if (this.props.additive) {
             additive = <div className="mx_Dialog_buttons_additive">{this.props.additive}</div>;
         }

src/components/views/elements/Dropdown.tsx

@@ -113,8 +113,8 @@ interface IState {
  */
 export default class Dropdown extends React.Component<DropdownProps, IState> {
     private readonly buttonRef = createRef<HTMLDivElement>();
-    private dropdownRootElement: HTMLDivElement = null;
+    private dropdownRootElement: HTMLDivElement | null = null;
-    private ignoreEvent: MouseEvent = null;
+    private ignoreEvent: MouseEvent | null = null;
     private childrenByKey: Record<string, ReactNode> = {};
 
     public constructor(props: DropdownProps) {
@@ -373,18 +373,14 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
             );
         }
 
-        const dropdownClasses: Record<string, boolean> = {
+        const dropdownClasses = classnames("mx_Dropdown", this.props.className, {
-            mx_Dropdown: true,
+            mx_Dropdown_disabled: !!this.props.disabled,
-            mx_Dropdown_disabled: this.props.disabled,
+        });
-        };
-        if (this.props.className) {
-            dropdownClasses[this.props.className] = true;
-        }
 
         // Note the menu sits inside the AccessibleButton div so it's anchored
         // to the input, but overflows below it. The root contains both.
         return (
-            <div className={classnames(dropdownClasses)} ref={this.collectRoot}>
+            <div className={dropdownClasses} ref={this.collectRoot}>
                 <AccessibleButton
                     className="mx_Dropdown_input mx_no_textinput"
                     onClick={this.onAccessibleButtonClick}

src/components/views/elements/EffectsOverlay.tsx

@@ -30,7 +30,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const effectsRef = useRef<Map<string, ICanvasEffect>>(new Map<string, ICanvasEffect>());
 
-    const lazyLoadEffectModule = async (name: string): Promise<ICanvasEffect> => {
+    const lazyLoadEffectModule = async (name: string): Promise<ICanvasEffect | null> => {
         if (!name) return null;
         let effect: ICanvasEffect | null = effectsRef.current.get(name) || null;
         if (effect === null) {
@@ -38,7 +38,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
             try {
                 const { default: Effect } = await import(`../../../effects/${name}`);
                 effect = new Effect(options);
-                effectsRef.current.set(name, effect);
+                effectsRef.current.set(name, effect!);
             } catch (err) {
                 logger.warn(`Unable to load effect module at '../../../effects/${name}.`, err);
             }
@@ -70,7 +70,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
             // eslint-disable-next-line react-hooks/exhaustive-deps
             const currentEffects = effectsRef.current; // this is not a react node ref, warning can be safely ignored
             for (const effect in currentEffects) {
-                const effectModule: ICanvasEffect = currentEffects.get(effect);
+                const effectModule: ICanvasEffect = currentEffects.get(effect)!;
                 if (effectModule && effectModule.isRunning) {
                     effectModule.stop();
                 }

src/components/views/elements/ErrorBoundary.tsx

@@ -30,7 +30,7 @@ interface Props {
 }
 
 interface IState {
-    error: Error;
+    error?: Error;
 }
 
 /**
@@ -41,9 +41,7 @@ export default class ErrorBoundary extends React.PureComponent<Props, IState> {
     public constructor(props: Props) {
         super(props);
 
-        this.state = {
+        this.state = {};
-            error: null,
-        };
     }
 
     public static getDerivedStateFromError(error: Error): Partial<IState> {
@@ -66,7 +64,7 @@ export default class ErrorBoundary extends React.PureComponent<Props, IState> {
         MatrixClientPeg.get()
             .store.deleteAllData()
             .then(() => {
-                PlatformPeg.get().reload();
+                PlatformPeg.get()?.reload();
             });
     };
 
@@ -121,7 +119,7 @@ export default class ErrorBoundary extends React.PureComponent<Props, IState> {
                 );
             }
 
-            let clearCacheButton: JSX.Element;
+            let clearCacheButton: JSX.Element | undefined;
             // we only show this button if there is an initialised MatrixClient otherwise we can't clear the cache
             if (MatrixClientPeg.get()) {
                 clearCacheButton = (

src/components/views/elements/EventListSummary.tsx

@@ -113,7 +113,7 @@ export default class EventListSummary extends React.Component<IProps> {
     private generateSummary(
         eventAggregates: Record<string, string[]>,
         orderedTransitionSequences: string[],
-    ): string | JSX.Element {
+    ): ReactNode {
         const summaries = orderedTransitionSequences.map((transitions) => {
             const userNames = eventAggregates[transitions];
             const nameList = this.renderNameList(userNames);
@@ -392,7 +392,7 @@ export default class EventListSummary extends React.Component<IProps> {
      * @returns {string?} the transition type given to this event. This defaults to `null`
      * if a transition is not recognised.
      */
-    private static getTransition(e: IUserEvents): TransitionType {
+    private static getTransition(e: IUserEvents): TransitionType | null {
         if (e.mxEvent.isRedacted()) {
             return TransitionType.MessageRemoved;
         }

src/components/views/elements/Field.tsx

@@ -79,7 +79,7 @@ export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElemen
     // The ref pass through to the input
     inputRef?: RefObject<HTMLInputElement>;
     // The element to create. Defaults to "input".
-    element?: "input";
+    element: "input";
     // The input's value. This is a controlled component, so the value is required.
     value: string;
 }
@@ -204,7 +204,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         const value = this.inputRef.current?.value ?? null;
         const { valid, feedback } = await this.props.onValidate({
             value,
-            focused,
+            focused: !!focused,
             allowEmpty,
         });
 

src/components/views/elements/GenericEventListSummary.tsx

@@ -36,7 +36,7 @@ interface IProps {
     // The list of room members for which to show avatars next to the summary
     "summaryMembers"?: RoomMember[];
     // The text to show as the summary of this event list
-    "summaryText"?: string | JSX.Element;
+    "summaryText"?: ReactNode;
     // An array of EventTiles to render when expanded
     "children": ReactNode[];
     // Called when the event list expansion is toggled

src/components/views/elements/IRCTimelineProfileResizer.tsx

@@ -29,7 +29,7 @@ interface IProps {
 
 interface IState {
     width: number;
-    IRCLayoutRoot: HTMLElement;
+    IRCLayoutRoot: HTMLElement | null;
 }
 
 export default class IRCTimelineProfileResizer extends React.Component<IProps, IState> {
@@ -77,7 +77,7 @@ export default class IRCTimelineProfileResizer extends React.Component<IProps, I
     };
 
     private updateCSSWidth(newWidth: number): void {
-        this.state.IRCLayoutRoot.style.setProperty("--name-width", newWidth + "px");
+        this.state.IRCLayoutRoot?.style.setProperty("--name-width", newWidth + "px");
     }
 
     private onMoueUp = (): void => {

src/components/views/elements/ImageView.tsx

@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from "react";
+import React, { createRef, CSSProperties } from "react";
 import FocusLock from "react-focus-lock";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
@@ -395,7 +395,7 @@ export default class ImageView extends React.Component<IProps, IState> {
     };
 
     private renderContextMenu(): JSX.Element {
-        let contextMenu = null;
+        let contextMenu: JSX.Element | undefined;
         if (this.state.contextMenuDisplayed) {
             contextMenu = (
                 <MessageContextMenu
@@ -419,11 +419,6 @@ export default class ImageView extends React.Component<IProps, IState> {
         else if (this.state.moving || !this.imageIsLoaded) transitionClassName = "";
         else transitionClassName = "mx_ImageView_image_animating";
 
-        let cursor;
-        if (this.state.moving) cursor = "grabbing";
-        else if (this.state.zoom === this.state.minZoom) cursor = "zoom-in";
-        else cursor = "zoom-out";
-
         const rotationDegrees = this.state.rotation + "deg";
         const zoom = this.state.zoom;
         const translatePixelsX = this.state.translationX + "px";
@@ -432,15 +427,18 @@ export default class ImageView extends React.Component<IProps, IState> {
         // First, we translate and only then we rotate, otherwise
         // we would apply the translation to an already rotated
         // image causing it translate in the wrong direction.
-        const style = {
+        const style: CSSProperties = {
-            cursor: cursor,
             transform: `translateX(${translatePixelsX})
                         translateY(${translatePixelsY})
                         scale(${zoom})
                         rotate(${rotationDegrees})`,
         };
 
-        let info;
+        if (this.state.moving) style.cursor = "grabbing";
+        else if (this.state.zoom === this.state.minZoom) style.cursor = "zoom-in";
+        else style.cursor = "zoom-out";
+
+        let info: JSX.Element | undefined;
         if (showEventMeta) {
             const mxEvent = this.props.mxEvent;
             const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
@@ -449,7 +447,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                 permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
             }
 
-            const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
+            const senderName = mxEvent.sender?.name ?? mxEvent.getSender();
             const sender = <div className="mx_ImageView_info_sender">{senderName}</div>;
             const messageTimestamp = (
                 <a
@@ -491,7 +489,7 @@ export default class ImageView extends React.Component<IProps, IState> {
             info = <div />;
         }
 
-        let contextMenuButton;
+        let contextMenuButton: JSX.Element | undefined;
         if (this.props.mxEvent) {
             contextMenuButton = (
                 <ContextMenuTooltipButton
@@ -519,7 +517,7 @@ export default class ImageView extends React.Component<IProps, IState> {
             />
         );
 
-        let title: JSX.Element;
+        let title: JSX.Element | undefined;
         if (this.props.mxEvent?.getContent()) {
             title = (
                 <div className="mx_ImageView_title">

src/components/views/elements/InteractiveTooltip.tsx

@@ -293,7 +293,7 @@ interface IProps {
 }
 
 interface IState {
-    contentRect: DOMRect;
+    contentRect?: DOMRect;
     visible: boolean;
 }
 
@@ -312,7 +312,6 @@ export default class InteractiveTooltip extends React.Component<IProps, IState>
         super(props);
 
         this.state = {
-            contentRect: null,
             visible: false,
         };
     }
@@ -331,7 +330,7 @@ export default class InteractiveTooltip extends React.Component<IProps, IState>
         document.removeEventListener("mousemove", this.onMouseMove);
     }
 
-    private collectContentRect = (element: HTMLElement): void => {
+    private collectContentRect = (element: HTMLElement | null): void => {
         // We don't need to clean up when unmounting, so ignore
         if (!element) return;
 
@@ -354,7 +353,7 @@ export default class InteractiveTooltip extends React.Component<IProps, IState>
         } else {
             const targetRight = targetRect.right + window.scrollX;
             const spaceOnRight = UIStore.instance.windowWidth - targetRight;
-            return contentRect && spaceOnRight - contentRect.width < MIN_SAFE_DISTANCE_TO_WINDOW_EDGE;
+            return !!contentRect && spaceOnRight - contentRect.width < MIN_SAFE_DISTANCE_TO_WINDOW_EDGE;
         }
     }
 
@@ -368,7 +367,7 @@ export default class InteractiveTooltip extends React.Component<IProps, IState>
         } else {
             const targetBottom = targetRect.bottom + window.scrollY;
             const spaceBelow = UIStore.instance.windowHeight - targetBottom;
-            return contentRect && spaceBelow - contentRect.height < MIN_SAFE_DISTANCE_TO_WINDOW_EDGE;
+            return !!contentRect && spaceBelow - contentRect.height < MIN_SAFE_DISTANCE_TO_WINDOW_EDGE;
         }
     }
 
@@ -416,7 +415,7 @@ export default class InteractiveTooltip extends React.Component<IProps, IState>
         document.removeEventListener("mousemove", this.onMouseMove);
     }
 
-    private renderTooltip(): JSX.Element {
+    private renderTooltip(): ReactNode {
         const { contentRect, visible } = this.state;
         if (!visible) {
             ReactDOM.unmountComponentAtNode(getOrCreateContainer());
@@ -435,7 +434,7 @@ export default class InteractiveTooltip extends React.Component<IProps, IState>
         // tooltip content would extend past the safe area towards the window
         // edge, flip around to below the target.
         const position: Partial<IRect> = {};
-        let chevronFace: ChevronFace = null;
+        let chevronFace: ChevronFace | null = null;
         if (this.isOnTheSide) {
             if (this.onLeftOfTarget()) {
                 position.left = targetLeft;
@@ -461,8 +460,7 @@ export default class InteractiveTooltip extends React.Component<IProps, IState>
 
         const chevron = <div className={"mx_InteractiveTooltip_chevron_" + chevronFace} />;
 
-        const menuClasses = classNames({
+        const menuClasses = classNames("mx_InteractiveTooltip", {
-            mx_InteractiveTooltip: true,
             mx_InteractiveTooltip_withChevron_top: chevronFace === ChevronFace.Top,
             mx_InteractiveTooltip_withChevron_left: chevronFace === ChevronFace.Left,
             mx_InteractiveTooltip_withChevron_right: chevronFace === ChevronFace.Right,

src/components/views/elements/LanguageDropdown.tsx

@@ -40,7 +40,7 @@ interface IProps {
 
 interface IState {
     searchQuery: string;
-    langs: Languages;
+    langs: Languages | null;
 }
 
 export default class LanguageDropdown extends React.Component<IProps, IState> {
@@ -103,8 +103,8 @@ export default class LanguageDropdown extends React.Component<IProps, IState> {
 
         // default value here too, otherwise we need to handle null / undefined
         // values between mounting and the initial value propagating
-        let language = SettingsStore.getValue("language", null, /*excludeDefault:*/ true);
+        let language = SettingsStore.getValue<string | undefined>("language", null, /*excludeDefault:*/ true);
-        let value = null;
+        let value: string | undefined;
         if (language) {
             value = this.props.value || language;
         } else {

src/components/views/elements/LazyRenderList.tsx

@@ -76,7 +76,7 @@ interface IProps<T> {
 }
 
 interface IState {
-    renderRange: ItemRange;
+    renderRange: ItemRange | null;
 }
 
 export default class LazyRenderList<T = any> extends React.Component<IProps<T>, IState> {
@@ -93,7 +93,7 @@ export default class LazyRenderList<T = any> extends React.Component<IProps<T>,
         };
     }
 
-    public static getDerivedStateFromProps(props: IProps<unknown>, state: IState): Partial<IState> {
+    public static getDerivedStateFromProps(props: IProps<unknown>, state: IState): Partial<IState> | null {
         const range = LazyRenderList.getVisibleRangeFromProps(props);
         const intersectRange = range.expand(props.overflowMargin);
         const renderRange = range.expand(props.overflowItems);

src/components/views/elements/MiniAvatarUploader.tsx

@@ -64,7 +64,8 @@ const MiniAvatarUploader: React.FC<IProps> = ({
     const label = hasAvatar || busy ? hasAvatarLabel : noAvatarLabel;
 
     const { room } = useContext(RoomContext);
-    const canSetAvatar = isUserAvatar || room?.currentState?.maySendStateEvent(EventType.RoomAvatar, cli.getUserId());
+    const canSetAvatar =
+        isUserAvatar || room?.currentState?.maySendStateEvent(EventType.RoomAvatar, cli.getSafeUserId());
     if (!canSetAvatar) return <React.Fragment>{children}</React.Fragment>;
 
     const visible = !!label && (hover || show);

src/components/views/elements/PersistentApp.tsx

@@ -50,7 +50,7 @@ export default class PersistentApp extends React.Component<IProps> {
                 app={app}
                 fullWidth={true}
                 room={this.room}
-                userId={this.context.credentials.userId}
+                userId={this.context.getSafeUserId()}
                 creatorUserId={app.creatorUserId}
                 widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}
                 waitForIframeLoad={app.waitForIframeLoad}

src/components/views/elements/PollCreateDialog.tsx

@@ -163,7 +163,12 @@ export default class PollCreateDialog extends ScrollableBaseModal<IProps, IState
         doMaybeLocalRoomAction(
             this.props.room.roomId,
             (actualRoomId: string) =>
-                this.matrixClient.sendEvent(actualRoomId, this.props.threadId, pollEvent.type, pollEvent.content),
+                this.matrixClient.sendEvent(
+                    actualRoomId,
+                    this.props.threadId ?? null,
+                    pollEvent.type,
+                    pollEvent.content,
+                ),
             this.matrixClient,
         )
             .then(() => this.props.onFinished(true))

src/components/views/elements/ReplyChain.tsx

@@ -48,7 +48,7 @@ interface IProps {
     parentEv?: MatrixEvent;
     // called when the ReplyChain contents has changed, including EventTiles thereof
     onHeightChanged: () => void;
-    permalinkCreator: RoomPermalinkCreator;
+    permalinkCreator?: RoomPermalinkCreator;
     // Specifies which layout to use.
     layout?: Layout;
     // Whether to always show a timestamp

src/components/views/elements/RoomAliasField.tsx

@@ -71,7 +71,7 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
         const postfix = domain ? <span title={`:${domain}`}>{`:${domain}`}</span> : <span />;
         const maxlength = domain ? 255 - domain.length - 2 : 255 - 1; // 2 for # and :
         const value = domain
-            ? this.props.value.substring(1, this.props.value.length - this.props.domain.length - 1)
+            ? this.props.value.substring(1, this.props.value.length - domain.length - 1)
             : this.props.value.substring(1);
 
         return { prefix, postfix, value, maxlength };
@@ -104,7 +104,7 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
 
     private onValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         const result = await this.validationRules(fieldState);
-        this.setState({ isValid: result.valid });
+        this.setState({ isValid: !!result.valid });
         return result;
     };
 
@@ -225,8 +225,9 @@ export default class RoomAliasField extends React.PureComponent<IProps, IState>
         return this.state.isValid;
     }
 
-    public validate(options: IValidateOpts): Promise<boolean> {
+    public async validate(options: IValidateOpts): Promise<boolean> {
-        return this.fieldRef.current?.validate(options);
+        const val = await this.fieldRef.current?.validate(options);
+        return val ?? false;
     }
 
     public focus(): void {

src/components/views/elements/RoomTopic.tsx

@@ -33,7 +33,7 @@ import TooltipTarget from "./TooltipTarget";
 import { Linkify, topicToHtml } from "../../../HtmlUtils";
 
 interface IProps extends React.HTMLProps<HTMLDivElement> {
-    room?: Room;
+    room: Room;
 }
 
 export default function RoomTopic({ room, ...props }: IProps): JSX.Element {
@@ -62,7 +62,7 @@ export default function RoomTopic({ room, ...props }: IProps): JSX.Element {
 
     useDispatcher(dis, (payload) => {
         if (payload.action === Action.ShowRoomTopic) {
-            const canSetTopic = room.currentState.maySendStateEvent(EventType.RoomTopic, client.getUserId());
+            const canSetTopic = room.currentState.maySendStateEvent(EventType.RoomTopic, client.getSafeUserId());
             const body = topicToHtml(topic?.text, topic?.html, ref, true);
 
             const modal = Modal.createDialog(InfoDialog, {

src/components/views/elements/SearchWarning.tsx

@@ -71,7 +71,7 @@ export default function SearchWarning({ isRoomEncrypted, kind }: IProps): JSX.El
 
     let text: ReactNode | undefined;
     let logo: JSX.Element | undefined;
-    if (desktopBuilds.get("available")) {
+    if (desktopBuilds?.get("available")) {
         logo = <img src={desktopBuilds.get("logo")} />;
         const buildUrl = desktopBuilds.get("url");
         switch (kind) {

src/components/views/elements/ServerPicker.tsx

@@ -33,7 +33,7 @@ interface IProps {
 }
 
 const showPickerDialog = (
-    title: string,
+    title: string | undefined,
     serverConfig: ValidatedServerConfig,
     onFinished: (config: ValidatedServerConfig) => void,
 ): void => {

src/components/views/elements/SettingsFlag.tsx

@@ -69,14 +69,14 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
     private save = async (val?: boolean): Promise<void> => {
         await SettingsStore.setValue(
             this.props.name,
-            this.props.roomId,
+            this.props.roomId ?? null,
             this.props.level,
             val !== undefined ? val : this.state.value,
         );
     };
 
     public render(): React.ReactNode {
-        const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level);
+        const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId ?? null, this.props.level);
 
         if (!canChange && this.props.hideIfCannotSet) return null;
 

src/components/views/elements/SpellCheckLanguagesDropdown.tsx

@@ -38,7 +38,7 @@ interface SpellCheckLanguagesDropdownIProps {
 
 interface SpellCheckLanguagesDropdownIState {
     searchQuery: string;
-    languages: Languages;
+    languages?: Languages;
 }
 
 export default class SpellCheckLanguagesDropdown extends React.Component<
@@ -51,7 +51,6 @@ export default class SpellCheckLanguagesDropdown extends React.Component<
 
         this.state = {
             searchQuery: "",
-            languages: null,
         };
     }
 
@@ -59,7 +58,7 @@ export default class SpellCheckLanguagesDropdown extends React.Component<
         const plaf = PlatformPeg.get();
         if (plaf) {
             plaf.getAvailableSpellCheckLanguages()
-                .then((languages) => {
+                ?.then((languages) => {
                     languages.sort(function (a, b) {
                         if (a < b) return -1;
                         if (a > b) return 1;
@@ -92,11 +91,11 @@ export default class SpellCheckLanguagesDropdown extends React.Component<
     }
 
     public render(): React.ReactNode {
-        if (this.state.languages === null) {
+        if (!this.state.languages) {
             return <Spinner />;
         }
 
-        let displayedLanguages;
+        let displayedLanguages: Languages;
         if (this.state.searchQuery) {
             displayedLanguages = this.state.languages.filter((lang) => {
                 return languageMatchesSearchQuery(this.state.searchQuery, lang);
@@ -111,8 +110,8 @@ export default class SpellCheckLanguagesDropdown extends React.Component<
 
         // default value here too, otherwise we need to handle null / undefined;
         // values between mounting and the initial value propagating
-        let language = SettingsStore.getValue("language", null, /*excludeDefault:*/ true);
+        let language = SettingsStore.getValue<string | undefined>("language", null, /*excludeDefault:*/ true);
-        let value = null;
+        let value: string | undefined;
         if (language) {
             value = this.props.value || language;
         } else {

src/components/views/elements/TextWithTooltip.tsx

@@ -24,7 +24,7 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
     tooltipClass?: string;
     tooltip: React.ReactNode;
     tooltipProps?: Omit<React.ComponentProps<typeof TooltipTarget>, "label" | "tooltipClassName" | "className">;
-    onClick?: (ev?: React.MouseEvent) => void;
+    onClick?: (ev: React.MouseEvent) => void;
 }
 
 export default class TextWithTooltip extends React.Component<IProps> {

src/components/views/elements/UseCaseSelection.tsx

@@ -40,7 +40,7 @@ export function UseCaseSelection({ onFinished }: Props): JSX.Element {
                 onFinished(selection);
             }, TIMEOUT);
             return () => {
-                clearTimeout(handler);
+                if (handler !== null) clearTimeout(handler);
                 handler = null;
             };
         }

src/components/views/elements/UseCaseSelectionButton.tsx

@@ -28,7 +28,7 @@ interface Props {
 }
 
 export function UseCaseSelectionButton({ useCase, onClick, selected }: Props): JSX.Element {
-    let label: string;
+    let label: string | undefined;
     switch (useCase) {
         case UseCase.PersonalMessaging:
             label = _t("Friends and family");

src/components/views/elements/Validation.tsx

@@ -43,7 +43,7 @@ interface IArgs<T, D = void> {
 }
 
 export interface IFieldState {
-    value: string;
+    value: string | null;
     focused: boolean;
     allowEmpty?: boolean;
 }

src/components/views/messages/DownloadActionButton.tsx

@@ -80,7 +80,7 @@ export default class DownloadActionButton extends React.PureComponent<IProps, IS
     }
 
     public render(): React.ReactNode {
-        let spinner: JSX.Element;
+        let spinner: JSX.Element | undefined;
         if (this.state.loading) {
             spinner = <Spinner w={18} h={18} />;
         }

src/components/views/messages/EditHistoryMessage.tsx

@@ -47,7 +47,7 @@ interface IProps {
 
 interface IState {
     canRedact: boolean;
-    sendStatus: EventStatus;
+    sendStatus: EventStatus | null;
 }
 
 export default class EditHistoryMessage extends React.PureComponent<IProps, IState> {
@@ -59,12 +59,10 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
         super(props);
 
         const cli = MatrixClientPeg.get();
-        const { userId } = cli.credentials;
+        const userId = cli.getSafeUserId();
         const event = this.props.mxEvent;
         const room = cli.getRoom(event.getRoomId());
-        if (event.localRedactionEvent()) {
+        event.localRedactionEvent()?.on(MatrixEventEvent.Status, this.onAssociatedStatusChanged);
-            event.localRedactionEvent().on(MatrixEventEvent.Status, this.onAssociatedStatusChanged);
-        }
         const canRedact = room.currentState.maySendRedactionForEvent(event, userId);
         this.state = { canRedact, sendStatus: event.getAssociatedStatus() };
     }
@@ -121,9 +119,7 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
         unmountPills(this.pills);
         unmountTooltips(this.tooltips);
         const event = this.props.mxEvent;
-        if (event.localRedactionEvent()) {
+        event.localRedactionEvent()?.off(MatrixEventEvent.Status, this.onAssociatedStatusChanged);
-            event.localRedactionEvent().off(MatrixEventEvent.Status, this.onAssociatedStatusChanged);
-        }
     }
 
     public componentDidUpdate(): void {
@@ -133,12 +129,12 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
 
     private renderActionBar(): JSX.Element {
         // hide the button when already redacted
-        let redactButton: JSX.Element;
+        let redactButton: JSX.Element | undefined;
         if (!this.props.mxEvent.isRedacted() && !this.props.isBaseEvent && this.state.canRedact) {
             redactButton = <AccessibleButton onClick={this.onRedactClick}>{_t("Remove")}</AccessibleButton>;
         }
 
-        let viewSourceButton: JSX.Element;
+        let viewSourceButton: JSX.Element | undefined;
         if (SettingsStore.getValue("developerMode")) {
             viewSourceButton = (
                 <AccessibleButton onClick={this.onViewSourceClick}>{_t("View Source")}</AccessibleButton>
@@ -189,9 +185,8 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
         }
 
         const timestamp = formatTime(new Date(mxEvent.getTs()), this.props.isTwelveHour);
-        const isSending = ["sending", "queued", "encrypting"].indexOf(this.state.sendStatus) !== -1;
+        const isSending = ["sending", "queued", "encrypting"].includes(this.state.sendStatus!);
-        const classes = classNames({
+        const classes = classNames("mx_EventTile", {
-            mx_EventTile: true,
             // Note: we keep the `sending` state class for tests, not for our styles
             mx_EventTile_sending: isSending,
         });

src/components/views/messages/JumpToDatePicker.tsx

@@ -22,7 +22,7 @@ import { RovingAccessibleButton, useRovingTabIndex } from "../../../accessibilit
 
 interface IProps {
     ts: number;
-    onDatePicked?: (dateString: string) => void;
+    onDatePicked: (dateString: string) => void;
 }
 
 const JumpToDatePicker: React.FC<IProps> = ({ ts, onDatePicked }: IProps) => {

src/components/views/messages/LegacyCallEvent.tsx

@@ -165,7 +165,7 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
                         {this.props.timestamp}
                     </div>
                 );
-            } else if ([CallErrorCode.UserHangup, "user hangup"].includes(hangupReason) || !hangupReason) {
+            } else if (!hangupReason || [CallErrorCode.UserHangup, "user hangup"].includes(hangupReason)) {
                 // workaround for https://github.com/vector-im/element-web/issues/5178
                 // it seems Android randomly sets a reason of "user hangup" which is
                 // interpreted as an error code :(

src/components/views/messages/MBeaconBody.tsx

@@ -140,7 +140,7 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent, getRelati
         error?.message === LocationShareError.MapStyleUrlNotConfigured ||
         error?.message === LocationShareError.MapStyleUrlNotReachable;
     const displayStatus = getBeaconDisplayStatus(
-        isLive,
+        !!isLive,
         latestLocationState,
         // if we are unable to display maps because it is not configured for the server
         // don't display an error
@@ -174,7 +174,7 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent, getRelati
         map = (
             <Map
                 id={mapId}
-                centerGeoUri={latestLocationState.uri}
+                centerGeoUri={latestLocationState?.uri}
                 onError={setError}
                 onClick={onClick}
                 className="mx_MBeaconBody_map"
@@ -184,7 +184,7 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent, getRelati
                         map={map}
                         id={`${mapId}-marker`}
                         geoUri={latestLocationState.uri}
-                        roomMember={markerRoomMember}
+                        roomMember={markerRoomMember ?? undefined}
                         useMemberColor
                     />
                 )}

src/components/views/messages/MImageBody.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps, createRef } from "react";
+import React, { ComponentProps, createRef, ReactNode } from "react";
 import { Blurhash } from "react-blurhash";
 import classNames from "classnames";
 import { CSSTransition, SwitchTransition } from "react-transition-group";
@@ -47,8 +47,8 @@ enum Placeholder {
 }
 
 interface IState {
-    contentUrl?: string;
+    contentUrl: string | null;
-    thumbUrl?: string;
+    thumbUrl: string | null;
     isAnimated?: boolean;
     error?: Error;
     imgError: boolean;
@@ -78,6 +78,8 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         this.reconnectedListener = createReconnectedListener(this.clearError);
 
         this.state = {
+            contentUrl: null,
+            thumbUrl: null,
             imgError: false,
             imgLoaded: false,
             hover: false,
@@ -126,7 +128,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                 };
             }
 
-            Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
+            Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", undefined, true);
         }
     };
 
@@ -177,7 +179,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         this.setState({ imgLoaded: true, loadedImageDimensions });
     };
 
-    private getContentUrl(): string {
+    private getContentUrl(): string | null {
         // During export, the content url will point to the MSC, which will later point to a local url
         if (this.props.forExport) return this.media.srcMxc;
         return this.media.srcHttp;
@@ -187,7 +189,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         return mediaFromContent(this.props.mxEvent.getContent());
     }
 
-    private getThumbUrl(): string {
+    private getThumbUrl(): string | null {
         // FIXME: we let images grow as wide as you like, rather than capped to 800x600.
         // So either we need to support custom timeline widths here, or reimpose the cap, otherwise the
         // thumbnail resolution will be unnecessarily reduced.
@@ -242,8 +244,8 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     private async downloadImage(): Promise<void> {
         if (this.state.contentUrl) return; // already downloaded
 
-        let thumbUrl: string;
+        let thumbUrl: string | null;
-        let contentUrl: string;
+        let contentUrl: string | null;
         if (this.props.mediaEventHelper.media.isEncrypted) {
             try {
                 [contentUrl, thumbUrl] = await Promise.all([
@@ -276,7 +278,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         // If there is no included non-animated thumbnail then we will generate our own, we can't depend on the server
         // because 1. encryption and 2. we can't ask the server specifically for a non-animated thumbnail.
         if (isAnimated && !SettingsStore.getValue("autoplayGifs")) {
-            if (!thumbUrl || !content?.info.thumbnail_info || mayBeAnimated(content.info.thumbnail_info.mimetype)) {
+            if (!thumbUrl || !content?.info?.thumbnail_info || mayBeAnimated(content.info.thumbnail_info.mimetype)) {
                 const img = document.createElement("img");
                 const loadPromise = new Promise((resolve, reject) => {
                     img.onload = resolve;
@@ -364,7 +366,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         }
     }
 
-    protected getBanner(content: IMediaEventContent): JSX.Element {
+    protected getBanner(content: IMediaEventContent): ReactNode {
         // Hide it for the threads list & the file panel where we show it as text anyway.
         if (
             [TimelineRenderingType.ThreadsList, TimelineRenderingType.File].includes(this.context.timelineRenderingType)
@@ -429,9 +431,9 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             forcedHeight ?? this.props.maxImageHeight,
         );
 
-        let img: JSX.Element;
+        let img: JSX.Element | undefined;
-        let placeholder: JSX.Element;
+        let placeholder: JSX.Element | undefined;
-        let gifLabel: JSX.Element;
+        let gifLabel: JSX.Element | undefined;
 
         if (!this.props.forExport && !this.state.imgLoaded) {
             const classes = classNames("mx_MImageBody_placeholder", {
@@ -471,7 +473,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             gifLabel = <p className="mx_MImageBody_gifLabel">GIF</p>;
         }
 
-        let banner: JSX.Element;
+        let banner: ReactNode | undefined;
         if (this.state.showImage && this.state.hover) {
             banner = this.getBanner(content);
         }
@@ -526,7 +528,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     }
 
     // Overridden by MStickerBody
-    protected getPlaceholder(width: number, height: number): JSX.Element {
+    protected getPlaceholder(width: number, height: number): ReactNode {
         const blurhash = this.props.mxEvent.getContent().info?.[BLURHASH_FIELD];
 
         if (blurhash) {
@@ -540,12 +542,12 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
     }
 
     // Overridden by MStickerBody
-    protected getTooltip(): JSX.Element {
+    protected getTooltip(): ReactNode {
         return null;
     }
 
     // Overridden by MStickerBody
-    protected getFileBody(): string | JSX.Element {
+    protected getFileBody(): ReactNode {
         if (this.props.forExport) return null;
         /*
          * In the room timeline or the thread context we don't need the download
@@ -577,7 +579,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         }
 
         let contentUrl = this.state.contentUrl;
-        let thumbUrl: string;
+        let thumbUrl: string | undefined;
         if (this.props.forExport) {
             contentUrl = this.props.mxEvent.getContent().url ?? this.props.mxEvent.getContent().file?.url;
             thumbUrl = contentUrl;

src/components/views/messages/MJitsiWidgetEvent.tsx

@@ -41,7 +41,7 @@ export default class MJitsiWidgetEvent extends React.PureComponent<IProps> {
         const widgetId = this.props.mxEvent.getStateKey();
         const widget = WidgetStore.instance.getRoom(room.roomId, true).widgets.find((w) => w.id === widgetId);
 
-        let joinCopy = _t("Join the conference at the top of this room");
+        let joinCopy: string | null = _t("Join the conference at the top of this room");
         if (widget && WidgetLayoutStore.instance.isInContainer(room, widget, Container.Right)) {
             joinCopy = _t("Join the conference from the room information card on the right");
         } else if (!widget) {

src/components/views/messages/MKeyVerificationRequest.tsx

@@ -124,7 +124,7 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
 
         let title: string;
         let subtitle: string;
-        let stateNode: JSX.Element;
+        let stateNode: JSX.Element | undefined;
 
         if (!request.canAccept) {
             let stateLabel;

src/components/views/messages/MLocationBody.tsx

@@ -37,7 +37,7 @@ import { IBodyProps } from "./IBodyProps";
 import { createReconnectedListener } from "../../../utils/connection";
 
 interface IState {
-    error: Error;
+    error?: Error;
 }
 
 export default class MLocationBody extends React.Component<IBodyProps, IState> {
@@ -58,9 +58,7 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
 
         this.reconnectedListener = createReconnectedListener(this.clearError);
 
-        this.state = {
+        this.state = {};
-            error: undefined,
-        };
     }
 
     private onClick = (): void => {
@@ -149,7 +147,12 @@ export const LocationBodyContent: React.FC<LocationBodyContentProps> = ({
     const mapElement = (
         <Map id={mapId} centerGeoUri={geoUri} onClick={onClick} onError={onError} className="mx_MLocationBody_map">
             {({ map }) => (
-                <SmartMarker map={map} id={`${mapId}-marker`} geoUri={geoUri} roomMember={markerRoomMember} />
+                <SmartMarker
+                    map={map}
+                    id={`${mapId}-marker`}
+                    geoUri={geoUri}
+                    roomMember={markerRoomMember ?? undefined}
+                />
             )}
         </Map>
     );

src/components/views/messages/MPollBody.tsx

@@ -128,7 +128,7 @@ export function launchPollEditor(mxEvent: MatrixEvent, getRelationsForEvent?: Ge
             PollCreateDialog,
             {
                 room: MatrixClientPeg.get().getRoom(mxEvent.getRoomId()),
-                threadId: mxEvent.getThread()?.id ?? null,
+                threadId: mxEvent.getThread()?.id,
                 editingMxEvent: mxEvent,
             },
             "mx_CompoundDialog",

src/components/views/messages/MStickerBody.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 
 import MImageBody from "./MImageBody";
 import { BLURHASH_FIELD } from "../../../utils/image-media";
@@ -33,7 +33,7 @@ export default class MStickerBody extends MImageBody {
     // MStickerBody doesn't need a wrapping `<a href=...>`, but it does need extra padding
     // which is added by mx_MStickerBody_wrapper
     protected wrapImage(contentUrl: string, children: React.ReactNode): JSX.Element {
-        let onClick = null;
+        let onClick: React.MouseEventHandler | undefined;
         if (!this.state.showImage) {
             onClick = this.onClick;
         }
@@ -46,7 +46,7 @@ export default class MStickerBody extends MImageBody {
     }
 
     // Placeholder to show in place of the sticker image if img onLoad hasn't fired yet.
-    protected getPlaceholder(width: number, height: number): JSX.Element {
+    protected getPlaceholder(width: number, height: number): ReactNode {
         if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
         return (
             <img
@@ -61,7 +61,7 @@ export default class MStickerBody extends MImageBody {
     }
 
     // Tooltip to show on mouse over
-    protected getTooltip(): JSX.Element {
+    protected getTooltip(): ReactNode {
         const content = this.props.mxEvent && this.props.mxEvent.getContent();
 
         if (!content || !content.body || !content.info || !content.info.w) return null;
@@ -74,11 +74,11 @@ export default class MStickerBody extends MImageBody {
     }
 
     // Don't show "Download this_file.png ..."
-    protected getFileBody(): JSX.Element {
+    protected getFileBody(): ReactNode {
         return null;
     }
 
-    protected getBanner(content: IMediaEventContent): JSX.Element {
+    protected getBanner(content: IMediaEventContent): ReactNode {
         return null; // we don't need a banner, we have a tooltip
     }
 }

src/components/views/messages/MVideoBody.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import { decode } from "blurhash";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -31,13 +31,13 @@ import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContex
 import MediaProcessingError from "./shared/MediaProcessingError";
 
 interface IState {
-    decryptedUrl?: string;
+    decryptedUrl: string | null;
-    decryptedThumbnailUrl?: string;
+    decryptedThumbnailUrl: string | null;
-    decryptedBlob?: Blob;
+    decryptedBlob: Blob | null;
     error?: any;
     fetchingData: boolean;
     posterLoading: boolean;
-    blurhashUrl: string;
+    blurhashUrl: string | null;
 }
 
 export default class MVideoBody extends React.PureComponent<IBodyProps, IState> {
@@ -61,21 +61,21 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         };
     }
 
-    private getContentUrl(): string | null {
+    private getContentUrl(): string | undefined {
         const content = this.props.mxEvent.getContent<IMediaEventContent>();
         // During export, the content url will point to the MSC, which will later point to a local url
-        if (this.props.forExport) return content.file?.url || content.url;
+        if (this.props.forExport) return content.file?.url ?? content.url;
         const media = mediaFromContent(content);
         if (media.isEncrypted) {
-            return this.state.decryptedUrl;
+            return this.state.decryptedUrl ?? undefined;
         } else {
-            return media.srcHttp;
+            return media.srcHttp ?? undefined;
         }
     }
 
     private hasContentUrl(): boolean {
         const url = this.getContentUrl();
-        return url && !url.startsWith("data:");
+        return !!url && !url.startsWith("data:");
     }
 
     private getThumbUrl(): string | null {
@@ -227,7 +227,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         );
     }
 
-    private getFileBody = (): JSX.Element => {
+    private getFileBody = (): ReactNode => {
         if (this.props.forExport) return null;
         return this.showFileBody && <MFileBody {...this.props} showGenericPlaceholder={false} />;
     };
@@ -271,7 +271,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
 
         const contentUrl = this.getContentUrl();
         const thumbUrl = this.getThumbUrl();
-        let poster = null;
+        let poster: string | undefined;
         let preload = "metadata";
         if (content.info && thumbUrl) {
             poster = thumbUrl;

src/components/views/messages/MessageActionBar.tsx

@@ -63,7 +63,7 @@ interface IOptionsButtonProps {
     mxEvent: MatrixEvent;
     // TODO: Types
     getTile: () => any | null;
-    getReplyChain: () => ReplyChain;
+    getReplyChain: () => ReplyChain | null;
     permalinkCreator: RoomPermalinkCreator;
     onFocusChange: (menuDisplayed: boolean) => void;
     getRelationsForEvent?: GetRelationsForEvent;
@@ -97,10 +97,10 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
         [openMenu, onFocus],
     );
 
-    let contextMenu: ReactElement | null;
+    let contextMenu: ReactElement | undefined;
-    if (menuDisplayed) {
+    if (menuDisplayed && button.current) {
         const tile = getTile && getTile();
-        const replyChain = getReplyChain && getReplyChain();
+        const replyChain = getReplyChain();
 
         const buttonRect = button.current.getBoundingClientRect();
         contextMenu = (
@@ -109,7 +109,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
                 mxEvent={mxEvent}
                 permalinkCreator={permalinkCreator}
                 eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
-                collapseReplyChain={replyChain && replyChain.canCollapse() ? replyChain.collapse : undefined}
+                collapseReplyChain={replyChain?.canCollapse() ? replyChain.collapse : undefined}
                 onFinished={closeMenu}
                 getRelationsForEvent={getRelationsForEvent}
             />
@@ -148,8 +148,8 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
         onFocusChange(menuDisplayed);
     }, [onFocusChange, menuDisplayed]);
 
-    let contextMenu;
+    let contextMenu: JSX.Element | undefined;
-    if (menuDisplayed) {
+    if (menuDisplayed && button.current) {
         const buttonRect = button.current.getBoundingClientRect();
         contextMenu = (
             <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
@@ -211,7 +211,7 @@ const ReplyInThreadButton: React.FC<IReplyInThreadButton> = ({ mxEvent }) => {
         if (mxEvent.getThread() && !mxEvent.isThreadRoot) {
             defaultDispatcher.dispatch<ShowThreadPayload>({
                 action: Action.ShowThread,
-                rootEvent: mxEvent.getThread().rootEvent,
+                rootEvent: mxEvent.getThread()!.rootEvent,
                 initialEvent: mxEvent,
                 scroll_into_view: true,
                 highlighted: true,
@@ -293,7 +293,7 @@ interface IMessageActionBarProps {
     reactions?: Relations | null | undefined;
     // TODO: Types
     getTile: () => any | null;
-    getReplyChain: () => ReplyChain | undefined;
+    getReplyChain: () => ReplyChain | null;
     permalinkCreator?: RoomPermalinkCreator;
     onFocusChange?: (menuDisplayed: boolean) => void;
     toggleThreadExpanded: () => void;
@@ -421,7 +421,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
     };
 
     public render(): React.ReactNode {
-        const toolbarOpts = [];
+        const toolbarOpts: JSX.Element[] = [];
         if (canEditContent(this.props.mxEvent)) {
             toolbarOpts.push(
                 <RovingAccessibleTooltipButton
@@ -452,8 +452,8 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
 
         // We show a different toolbar for failed events, so detect that first.
         const mxEvent = this.props.mxEvent;
-        const editStatus = mxEvent.replacingEvent() && mxEvent.replacingEvent().status;
+        const editStatus = mxEvent.replacingEvent()?.status;
-        const redactStatus = mxEvent.localRedactionEvent() && mxEvent.localRedactionEvent().status;
+        const redactStatus = mxEvent.localRedactionEvent()?.status;
         const allowCancel = canCancel(mxEvent.status) || canCancel(editStatus) || canCancel(redactStatus);
         const isFailed = [mxEvent.status, editStatus, redactStatus].includes(EventStatus.NOT_SENT);
         if (allowCancel && isFailed) {

src/components/views/messages/MessageEvent.tsx

@@ -58,7 +58,7 @@ interface IProps extends Omit<IBodyProps, "onMessageAllowed" | "mediaEventHelper
 }
 
 export interface IOperableEventTile {
-    getEventTileOps(): IEventTileOps;
+    getEventTileOps(): IEventTileOps | null;
 }
 
 const baseBodyTypes = new Map<string, typeof React.Component>([
@@ -159,12 +159,12 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
             if (this.props.mxEvent.isDecryptionFailure()) {
                 BodyType = DecryptionFailureBody;
             } else if (type && this.evTypes.has(type)) {
-                BodyType = this.evTypes.get(type);
+                BodyType = this.evTypes.get(type)!;
             } else if (msgtype && this.bodyTypes.has(msgtype)) {
-                BodyType = this.bodyTypes.get(msgtype);
+                BodyType = this.bodyTypes.get(msgtype)!;
             } else if (content.url) {
                 // Fallback to MFileBody if there's a content URL
-                BodyType = this.bodyTypes.get(MsgType.File);
+                BodyType = this.bodyTypes.get(MsgType.File)!;
             } else {
                 // Fallback to UnknownBody otherwise if not redacted
                 BodyType = UnknownBody;

src/components/views/messages/ReactionsRow.tsx

@@ -142,7 +142,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
         this.forceUpdate();
     };
 
-    private getMyReactions(): MatrixEvent[] {
+    private getMyReactions(): MatrixEvent[] | null {
         const reactions = this.props.reactions;
         if (!reactions) {
             return null;
@@ -206,7 +206,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
         // Show the first MAX_ITEMS if there are MAX_ITEMS + 1 or more items.
         // The "+ 1" ensure that the "show all" reveals something that takes up
         // more space than the button itself.
-        let showAllButton: JSX.Element;
+        let showAllButton: JSX.Element | undefined;
         if (items.length > MAX_ITEMS_WHEN_LIMITED + 1 && !showAll) {
             items = items.slice(0, MAX_ITEMS_WHEN_LIMITED);
             showAllButton = (

src/components/views/messages/ReactionsRowButton.tsx

@@ -106,9 +106,9 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
         }
 
         const room = this.context.getRoom(mxEvent.getRoomId());
-        let label: string;
+        let label: string | undefined;
         if (room) {
-            const senders = [];
+            const senders: string[] = [];
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender());
                 senders.push(member?.name || reactionEvent.getSender());

src/components/views/messages/SenderProfile.tsx

@@ -43,5 +43,7 @@ export default function SenderProfile({ mxEvent, onClick, withTooltip }: IProps)
             emphasizeDisplayName={true}
             withTooltip={withTooltip}
         />
-    ) : null;
+    ) : (
+        <></>
+    );
 }

src/components/views/messages/TextualBody.tsx

@@ -342,7 +342,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
             if (node.tagName === "SPAN" && typeof node.getAttribute("data-mx-spoiler") === "string") {
                 const spoilerContainer = document.createElement("span");
 
-                const reason = node.getAttribute("data-mx-spoiler");
+                const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
                 node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
                 const spoiler = <Spoiler reason={reason} contentHtml={node.outerHTML} />;
 
@@ -367,7 +367,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
             const node = nodes[i];
             if (node.tagName === "A" && node.getAttribute("href")) {
                 if (this.isLinkPreviewable(node)) {
-                    links.push(node.getAttribute("href"));
+                    links.push(node.getAttribute("href")!);
                 }
             } else if (node.tagName === "PRE" || node.tagName === "CODE" || node.tagName === "BLOCKQUOTE") {
                 continue;
@@ -380,7 +380,8 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
 
     private isLinkPreviewable(node: Element): boolean {
         // don't try to preview relative links
-        if (!node.getAttribute("href").startsWith("http://") && !node.getAttribute("href").startsWith("https://")) {
+        const href = node.getAttribute("href") ?? "";
+        if (!href.startsWith("http://") && !href.startsWith("https://")) {
             return false;
         }
 
@@ -389,9 +390,10 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         // or from a full foo.bar/baz style schemeless URL) - or be a markdown-style
         // link, in which case we check the target text differs from the link value.
         // TODO: make this configurable?
-        if (node.textContent.indexOf("/") > -1) {
+        if (node.textContent?.includes("/")) {
             return true;
-        } else {
+        }
+
         const url = node.getAttribute("href");
         const host = url.match(/^https?:\/\/(.*?)(\/|$)/)[1];
 
@@ -400,7 +402,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         // what the matrix.to site looks like).
         if (isPermalinkHost(host)) return false;
 
-            if (node.textContent.toLowerCase().trim().startsWith(host.toLowerCase())) {
+        if (node.textContent?.toLowerCase().trim().startsWith(host.toLowerCase())) {
             // it's a "foo.pl" style link
             return false;
         } else {
@@ -408,7 +410,6 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
             return true;
         }
     }
-    }
 
     private onCancelClick = (): void => {
         this.setState({ widgetHidden: true });
@@ -434,7 +435,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
      * to start with (e.g. pills, links in the content).
      */
     private onBodyLinkClick = (e: MouseEvent): void => {
-        let target = e.target as HTMLLinkElement;
+        let target: HTMLLinkElement | null = e.target as HTMLLinkElement;
         // links processed by linkifyjs have their own handler so don't handle those here
         if (target.classList.contains(linkifyOpts.className as string)) return;
         if (target.nodeName !== "A") {

src/components/views/messages/TileErrorBoundary.tsx

@@ -34,16 +34,14 @@ interface IProps {
 }
 
 interface IState {
-    error: Error;
+    error?: Error;
 }
 
 export default class TileErrorBoundary extends React.Component<IProps, IState> {
     public constructor(props: IProps) {
         super(props);
 
-        this.state = {
+        this.state = {};
-            error: null,
-        };
     }
 
     public static getDerivedStateFromError(error: Error): Partial<IState> {

src/components/views/rooms/Autocomplete.tsx

@@ -117,7 +117,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
                 // Hide the autocomplete box
                 hide: true,
             });
-            return Promise.resolve(null);
+            return Promise.resolve();
         }
         let autocompleteDelay = SettingsStore.getValue("autocompleteDelay");
 
@@ -204,7 +204,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         this.setSelection(1 + index);
     }
 
-    public onEscape(e: KeyboardEvent): boolean {
+    public onEscape(e: KeyboardEvent): boolean | undefined {
         const completionCount = this.countCompletions();
         if (completionCount === 0) {
             // autocomplete is already empty, so don't preventDefault

src/components/views/rooms/BasicMessageComposer.tsx

@@ -132,7 +132,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
 
     private _isCaretAtEnd: boolean;
     private lastCaret: DocumentOffset;
-    private lastSelection: ReturnType<typeof cloneSelection>;
+    private lastSelection: ReturnType<typeof cloneSelection> | null;
 
     private readonly useMarkdownHandle: string;
     private readonly emoticonSettingHandle: string;
@@ -188,7 +188,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
     }
 
-    public replaceEmoticon(caretPosition: DocumentPosition, regex: RegExp): number {
+    public replaceEmoticon(caretPosition: DocumentPosition, regex: RegExp): number | undefined {
         const { model } = this.props;
         const range = model.startRange(caretPosition);
         // expand range max 9 characters backwards from caretPosition,
@@ -352,7 +352,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         this.onCutCopy(event, "cut");
     };
 
-    private onPaste = (event: ClipboardEvent<HTMLDivElement>): boolean => {
+    private onPaste = (event: ClipboardEvent<HTMLDivElement>): boolean | undefined => {
         event.preventDefault(); // we always handle the paste ourselves
         if (this.props.onPaste?.(event, this.props.model)) {
             // to prevent double handling, allow props.onPaste to skip internal onPaste
@@ -415,7 +415,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         this.lastSelection = cloneSelection(document.getSelection());
     }
 
-    private refreshLastCaretIfNeeded(): DocumentOffset {
+    private refreshLastCaretIfNeeded(): DocumentOffset | undefined {
         // XXX: needed when going up and down in editing messages ... not sure why yet
         // because the editors should stop doing this when when blurred ...
         // maybe it's on focus and the _editorRef isn't available yet or something.
@@ -441,7 +441,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     }
 
     public isSelectionCollapsed(): boolean {
-        return !this.lastSelection || this.lastSelection.isCollapsed;
+        return !this.lastSelection || !!this.lastSelection.isCollapsed;
     }
 
     public isCaretAtStart(): boolean {
@@ -537,7 +537,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
             // there is no current autocomplete window, try to open it
             this.tabCompleteName();
             handled = true;
-        } else if ([KeyBindingAction.Delete, KeyBindingAction.Backspace].includes(accessibilityAction)) {
+        } else if ([KeyBindingAction.Delete, KeyBindingAction.Backspace].includes(accessibilityAction!)) {
             this.formatBarRef.current.hide();
         }
 
@@ -750,7 +750,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     };
 
     public render(): React.ReactNode {
-        let autoComplete;
+        let autoComplete: JSX.Element | undefined;
         if (this.state.autoComplete) {
             const query = this.state.query;
             const queryLen = query.length;
@@ -785,7 +785,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
 
         const { completionIndex } = this.state;
         const hasAutocomplete = Boolean(this.state.autoComplete);
-        let activeDescendant: string;
+        let activeDescendant: string | undefined;
         if (hasAutocomplete && completionIndex >= 0) {
             activeDescendant = generateCompletionDomId(completionIndex);
         }
@@ -800,7 +800,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                 />
                 <div
                     className={classes}
-                    contentEditable={this.props.disabled ? null : true}
+                    contentEditable={this.props.disabled ? undefined : true}
                     tabIndex={0}
                     onBlur={this.onBlur}
                     onFocus={this.onFocus}

src/components/views/rooms/E2EIcon.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useState } from "react";
+import React, { CSSProperties, useState } from "react";
 import classNames from "classnames";
 
 import { _t, _td } from "../../../languageHandler";
@@ -44,7 +44,7 @@ const crossSigningRoomTitles: { [key in E2EState]?: string } = {
 
 interface IProps {
     isUser?: boolean;
-    status: E2EState | E2EStatus;
+    status?: E2EState | E2EStatus;
     className?: string;
     size?: number;
     onClick?: () => void;
@@ -77,13 +77,15 @@ const E2EIcon: React.FC<IProps> = ({
     );
 
     let e2eTitle: string | undefined;
+    if (status) {
         if (isUser) {
             e2eTitle = crossSigningUserTitles[status];
         } else {
             e2eTitle = crossSigningRoomTitles[status];
         }
+    }
 
-    let style;
+    let style: CSSProperties | undefined;
     if (size) {
         style = { width: `${size}px`, height: `${size}px` };
     }
@@ -91,7 +93,7 @@ const E2EIcon: React.FC<IProps> = ({
     const onMouseOver = (): void => setHover(true);
     const onMouseLeave = (): void => setHover(false);
 
-    let tip;
+    let tip: JSX.Element | undefined;
     if (hover && !hideTooltip) {
         tip = <Tooltip label={e2eTitle ? _t(e2eTitle) : ""} alignment={tooltipAlignment} />;
     }

src/components/views/rooms/EditMessageComposer.tsx

@@ -47,6 +47,7 @@ import { getSlashCommand, isSlashCommand, runSlashCommand, shouldSendAnyway } fr
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { PosthogAnalytics } from "../../../PosthogAnalytics";
 import { editorRoomKey, editorStateKey } from "../../../Editing";
+import DocumentOffset from "../../../editor/offset";
 
 function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
     const html = mxEvent.getContent().formatted_body;
@@ -130,7 +131,7 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
 
     private readonly editorRef = createRef<BasicMessageComposer>();
     private readonly dispatcherRef: string;
-    private model: EditorModel = null;
+    private model: EditorModel;
 
     public constructor(props: IEditMessageComposerProps, context: React.ContextType<typeof RoomContext>) {
         super(props);
@@ -250,7 +251,7 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
         return localStorage.getItem(this.editorRoomKey) !== null;
     }
 
-    private restoreStoredEditorState(partCreator: PartCreator): Part[] {
+    private restoreStoredEditorState(partCreator: PartCreator): Part[] | undefined {
         const json = localStorage.getItem(this.editorStateKey);
         if (json) {
             try {
@@ -382,7 +383,7 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
         // editorstate so it can be restored when the remote echo event tile gets rendered
         // in case we're currently editing a pending event
         const sel = document.getSelection();
-        let caret;
+        let caret: DocumentOffset | undefined;
         if (sel.focusNode) {
             caret = getCaretOffsetAndText(this.editorRef.current?.editorRef.current, sel).caret;
         }
@@ -390,7 +391,7 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
         // if caret is undefined because for some reason there isn't a valid selection,
         // then when mounting the editor again with the same editor state,
         // it will set the cursor at the end.
-        this.props.editState.setEditorState(caret, parts);
+        this.props.editState.setEditorState(caret ?? null, parts);
         window.removeEventListener("beforeunload", this.saveStoredEditorState);
         if (this.shouldSaveStoredEditorState) {
             this.saveStoredEditorState();
@@ -462,7 +463,7 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
                     model={this.model}
                     room={this.getRoom()}
                     threadId={this.props.editState?.getEvent()?.getThread()?.id}
-                    initialCaret={this.props.editState.getCaret()}
+                    initialCaret={this.props.editState.getCaret() ?? undefined}
                     label={_t("Edit message")}
                     onChange={this.onChange}
                 />

src/components/views/rooms/EntityTile.tsx

@@ -69,14 +69,14 @@ interface IProps {
     title?: string;
     avatarJsx?: JSX.Element; // <BaseAvatar />
     className?: string;
-    presenceState?: PresenceState;
+    presenceState: PresenceState;
-    presenceLastActiveAgo?: number;
+    presenceLastActiveAgo: number;
-    presenceLastTs?: number;
+    presenceLastTs: number;
     presenceCurrentlyActive?: boolean;
-    showInviteButton?: boolean;
+    showInviteButton: boolean;
     onClick(): void;
-    suppressOnHover?: boolean;
+    suppressOnHover: boolean;
-    showPresence?: boolean;
+    showPresence: boolean;
     subtextLabel?: string;
     e2eStatus?: E2EState;
     powerStatus?: PowerStatus;

src/components/views/rooms/EventTile.tsx

@@ -274,8 +274,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             verified: null,
             // The Relations model from the JS SDK for reactions to `mxEvent`
             reactions: this.getReactions(),
-            // Context menu position
-            contextMenu: null,
 
             hover: false,
 
@@ -697,13 +695,13 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         });
     };
 
-    private renderE2EPadlock(): JSX.Element {
+    private renderE2EPadlock(): ReactNode {
         // if the event was edited, show the verification info for the edit, not
         // the original
         const ev = this.props.mxEvent.replacingEvent() ?? this.props.mxEvent;
 
         // no icon for local rooms
-        if (isLocalRoom(ev.getRoomId()!)) return;
+        if (isLocalRoom(ev.getRoomId()!)) return null;
 
         // event could not be decrypted
         if (ev.isDecryptionFailure()) {
@@ -713,9 +711,9 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         // event is encrypted and not redacted, display padlock corresponding to whether or not it is verified
         if (ev.isEncrypted() && !ev.isRedacted()) {
             if (this.state.verified === E2EState.Normal) {
-                return; // no icon if we've not even cross-signed the user
+                return null; // no icon if we've not even cross-signed the user
             } else if (this.state.verified === E2EState.Verified) {
-                return; // no icon for verified
+                return null; // no icon for verified
             } else if (this.state.verified === E2EState.Unauthenticated) {
                 return <E2ePadlockUnauthenticated />;
             } else if (this.state.verified === E2EState.Unknown) {
@@ -729,16 +727,16 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             // else if room is encrypted
             // and event is being encrypted or is not_sent (Unknown Devices/Network Error)
             if (ev.status === EventStatus.ENCRYPTING) {
-                return;
+                return null;
             }
             if (ev.status === EventStatus.NOT_SENT) {
-                return;
+                return null;
             }
             if (ev.isState()) {
-                return; // we expect this to be unencrypted
+                return null; // we expect this to be unencrypted
             }
             if (ev.isRedacted()) {
-                return; // we expect this to be unencrypted
+                return null; // we expect this to be unencrypted
             }
             // if the event is not encrypted, but it's an e2e room, show the open padlock
             return <E2ePadlockUnencrypted />;
@@ -752,16 +750,16 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         this.setState({ actionBarFocused });
     };
 
-    private getTile: () => IEventTileType = () => this.tile.current;
+    private getTile: () => IEventTileType | null = () => this.tile.current;
 
-    private getReplyChain = (): ReplyChain => this.replyChain.current;
+    private getReplyChain = (): ReplyChain | null => this.replyChain.current;
 
-    private getReactions = (): Relations => {
+    private getReactions = (): Relations | null => {
         if (!this.props.showReactions || !this.props.getRelationsForEvent) {
             return null;
         }
         const eventId = this.props.mxEvent.getId();
-        return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction");
+        return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction") ?? null;
     };
 
     private onReactionsCreated = (relationType: string, eventType: string): void => {
@@ -795,7 +793,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         // Return if we're in a browser and click either an a tag or we have
         // selected text, as in those cases we want to use the native browser
         // menu
-        if (!PlatformPeg.get().allowOverridingNativeContextMenus() && (getSelectedText() || anchorElement)) return;
+        if (!PlatformPeg.get()?.allowOverridingNativeContextMenus() && (getSelectedText() || anchorElement)) return;
 
         // We don't want to show the menu when editing a message
         if (this.props.editState) return;
@@ -817,7 +815,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
 
     private onCloseMenu = (): void => {
         this.setState({
-            contextMenu: null,
+            contextMenu: undefined,
             actionBarFocused: false,
         });
     };
@@ -901,7 +899,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                 this.props.mxEvent.getContent().msgtype === MsgType.Emote,
         });
 
-        const isSending = ["sending", "queued", "encrypting"].indexOf(this.props.eventSendStatus) !== -1;
+        const isSending = ["sending", "queued", "encrypting"].includes(this.props.eventSendStatus!);
         const isRedacted = isMessageEvent(this.props.mxEvent) && this.props.isRedacted;
         const isEncryptionFailure = this.props.mxEvent.isDecryptionFailure();
 
@@ -1110,7 +1108,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         const groupPadlock = !useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
         const ircPadlock = useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
 
-        let msgOption;
+        let msgOption: JSX.Element | undefined;
         if (this.props.showReadReceipts) {
             if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
                 msgOption = <SentReceipt messageState={this.props.mxEvent.getAssociatedStatus()} />;
@@ -1127,7 +1125,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             }
         }
 
-        let replyChain;
+        let replyChain: JSX.Element | undefined;
         if (
             haveRendererForEvent(this.props.mxEvent, this.context.showHiddenEvents) &&
             shouldDisplayReply(this.props.mxEvent)
@@ -1480,7 +1478,7 @@ class E2ePadlock extends React.Component<IE2ePadlockProps, IE2ePadlockState> {
     };
 
     public render(): React.ReactNode {
-        let tooltip = null;
+        let tooltip: JSX.Element | undefined;
         if (this.state.hover) {
             tooltip = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} />;
         }
@@ -1506,7 +1504,7 @@ function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
         mx_EventTile_receiptSending: !isSent && !isFailed,
     });
 
-    let nonCssBadge = null;
+    let nonCssBadge: JSX.Element | undefined;
     if (isFailed) {
         nonCssBadge = <NotificationBadge notification={StaticNotificationState.RED_EXCLAMATION} />;
     }

src/components/views/rooms/HistoryTile.tsx

@@ -24,11 +24,11 @@ import { _t } from "../../../languageHandler";
 const HistoryTile: React.FC = () => {
     const { room } = useContext(RoomContext);
 
-    const oldState = room.getLiveTimeline().getState(EventTimeline.BACKWARDS);
+    const oldState = room?.getLiveTimeline().getState(EventTimeline.BACKWARDS);
-    const encryptionState = oldState.getStateEvents("m.room.encryption")[0];
+    const encryptionState = oldState?.getStateEvents("m.room.encryption")[0];
-    const historyState = oldState.getStateEvents("m.room.history_visibility")[0]?.getContent().history_visibility;
+    const historyState = oldState?.getStateEvents("m.room.history_visibility")[0]?.getContent().history_visibility;
 
-    let subtitle;
+    let subtitle: string | undefined;
     if (historyState == "invited") {
         subtitle = _t("You don't have permission to view messages from before you were invited.");
     } else if (historyState == "joined") {

src/components/views/rooms/LinkPreviewGroup.tsx

@@ -54,7 +54,7 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick, onH
 
     const showPreviews = expanded ? previews : previews.slice(0, INITIAL_NUM_PREVIEWS);
 
-    let toggleButton: JSX.Element;
+    let toggleButton: JSX.Element | undefined;
     if (previews.length > INITIAL_NUM_PREVIEWS) {
         toggleButton = (
             <AccessibleButton onClick={toggleExpanded}>
@@ -94,7 +94,7 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick, onH
 
 const fetchPreviews = (cli: MatrixClient, links: string[], ts: number): Promise<[string, IPreviewUrlResponse][]> => {
     return Promise.all<[string, IPreviewUrlResponse] | void>(
-        links.map(async (link): Promise<[string, IPreviewUrlResponse]> => {
+        links.map(async (link): Promise<[string, IPreviewUrlResponse] | undefined> => {
             try {
                 const preview = await cli.getUrlPreview(link, ts);
                 if (preview && Object.keys(preview).length > 0) {

src/components/views/rooms/LinkPreviewWidget.tsx

@@ -44,7 +44,7 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
         ev.preventDefault();
 
         let src = p["og:image"];
-        if (src && src.startsWith("mxc://")) {
+        if (src?.startsWith("mxc://")) {
             src = mediaFromMxc(src).srcHttp;
         }
 
@@ -68,7 +68,7 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
             };
         }
 
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", undefined, true);
     };
 
     public render(): React.ReactNode {
@@ -78,7 +78,7 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
         }
 
         // FIXME: do we want to factor out all image displaying between this and MImageBody - especially for lightboxing?
-        let image = p["og:image"];
+        let image: string | null = p["og:image"] ?? null;
         if (!SettingsStore.getValue("showImages")) {
             image = null; // Don't render a button to show the image, just hide it outright
         }
@@ -99,7 +99,7 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
             );
         }
 
-        let img;
+        let img: JSX.Element | undefined;
         if (image) {
             img = (
                 <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}>

src/components/views/rooms/MemberList.tsx

@@ -123,7 +123,9 @@ export default class MemberList extends React.Component<IProps, IState> {
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.roomId);
 
-        return room?.canInvite(cli.getUserId()) || (room?.isSpaceRoom() && room.getJoinRule() === JoinRule.Public);
+        return (
+            !!room?.canInvite(cli.getSafeUserId()) || !!(room?.isSpaceRoom() && room.getJoinRule() === JoinRule.Public)
+        );
     }
 
     private getMembersState(invitedMembers: Array<RoomMember>, joinedMembers: Array<RoomMember>): IState {
@@ -276,7 +278,7 @@ export default class MemberList extends React.Component<IProps, IState> {
         });
     };
 
-    private getPending3PidInvites(): Array<MatrixEvent> {
+    private getPending3PidInvites(): MatrixEvent[] | undefined {
         // include 3pid invites (m.room.third_party_invite) state events.
         // The HS may have already converted these into m.room.member invites so
         // we shouldn't add them if the 3pid invite state key (token) is in the

src/components/views/rooms/MemberTile.tsx

@@ -41,7 +41,7 @@ interface IProps {
 
 interface IState {
     isRoomEncrypted: boolean;
-    e2eStatus: E2EState;
+    e2eStatus?: E2EState;
 }
 
 export default class MemberTile extends React.Component<IProps, IState> {
@@ -57,7 +57,6 @@ export default class MemberTile extends React.Component<IProps, IState> {
 
         this.state = {
             isRoomEncrypted: false,
-            e2eStatus: null,
         };
     }
 
@@ -187,7 +186,7 @@ export default class MemberTile extends React.Component<IProps, IState> {
     public render(): React.ReactNode {
         const member = this.props.member;
         const name = this.getDisplayName();
-        const presenceState = member.user?.presence ?? null;
+        const presenceState = member.user?.presence as PresenceState | undefined;
 
         const av = <MemberAvatar member={member} width={36} height={36} aria-hidden="true" />;
 
@@ -222,7 +221,7 @@ export default class MemberTile extends React.Component<IProps, IState> {
         return (
             <EntityTile
                 {...this.props}
-                presenceState={presenceState as PresenceState | null}
+                presenceState={presenceState}
                 presenceLastActiveAgo={member.user ? member.user.lastActiveAgo : 0}
                 presenceLastTs={member.user ? member.user.lastPresenceTs : 0}
                 presenceCurrentlyActive={member.user ? member.user.currentlyActive : false}

src/components/views/rooms/MessageComposerButtons.tsx

@@ -172,7 +172,7 @@ export const UploadButtonContext = createContext<UploadButtonFn | null>(null);
 
 interface IUploadButtonProps {
     roomId: string;
-    relation?: IEventRelation | null;
+    relation?: IEventRelation;
     children: ReactNode;
 }
 
@@ -197,11 +197,11 @@ const UploadButtonContextProvider: React.FC<IUploadButtonProps> = ({ roomId, rel
     });
 
     const onUploadFileInputChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
-        if (ev.target.files.length === 0) return;
+        if (ev.target.files?.length === 0) return;
 
         // Take a copy, so we can safely reset the value of the form control
         ContentMessages.sharedInstance().sendContentListToRoom(
-            Array.from(ev.target.files),
+            Array.from(ev.target.files!),
             roomId,
             relation,
             cli,
@@ -316,7 +316,7 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
             });
         } else {
             const threadId =
-                this.props.relation?.rel_type === THREAD_RELATION_TYPE.name ? this.props.relation.event_id : null;
+                this.props.relation?.rel_type === THREAD_RELATION_TYPE.name ? this.props.relation.event_id : undefined;
 
             Modal.createDialog(
                 PollCreateDialog,

src/components/views/rooms/NewRoomIntro.tsx

@@ -166,7 +166,7 @@ const NewRoomIntro: React.FC = () => {
         const creator = room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
         const creatorName = room?.getMember(creator)?.rawDisplayName || creator;
 
-        let createdText;
+        let createdText: string;
         if (creator === cli.getUserId()) {
             createdText = _t("You created this room.");
         } else {
@@ -175,15 +175,15 @@ const NewRoomIntro: React.FC = () => {
             });
         }
 
-        let parentSpace: Room;
+        let parentSpace: Room | undefined;
         if (
-            SpaceStore.instance.activeSpaceRoom?.canInvite(cli.getUserId()) &&
+            SpaceStore.instance.activeSpaceRoom?.canInvite(cli.getSafeUserId()) &&
             SpaceStore.instance.isRoomInSpace(SpaceStore.instance.activeSpace, room.roomId)
         ) {
             parentSpace = SpaceStore.instance.activeSpaceRoom;
         }
 
-        let buttons;
+        let buttons: JSX.Element | undefined;
         if (parentSpace && shouldShowComponent(UIComponent.InviteUsers)) {
             buttons = (
                 <div className="mx_NewRoomIntro_buttons">
@@ -191,12 +191,12 @@ const NewRoomIntro: React.FC = () => {
                         className="mx_NewRoomIntro_inviteButton"
                         kind="primary"
                         onClick={() => {
-                            showSpaceInvite(parentSpace);
+                            showSpaceInvite(parentSpace!);
                         }}
                     >
                         {_t("Invite to %(spaceName)s", { spaceName: parentSpace.name })}
                     </AccessibleButton>
-                    {room.canInvite(cli.getUserId()) && (
+                    {room.canInvite(cli.getSafeUserId()) && (
                         <AccessibleButton
                             className="mx_NewRoomIntro_inviteButton"
                             kind="primary_outline"
@@ -209,7 +209,7 @@ const NewRoomIntro: React.FC = () => {
                     )}
                 </div>
             );
-        } else if (room.canInvite(cli.getUserId()) && shouldShowComponent(UIComponent.InviteUsers)) {
+        } else if (room.canInvite(cli.getSafeUserId()) && shouldShowComponent(UIComponent.InviteUsers)) {
             buttons = (
                 <div className="mx_NewRoomIntro_buttons">
                     <AccessibleButton

src/components/views/rooms/NotificationBadge.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MouseEvent } from "react";
+import React, { MouseEvent, ReactNode } from "react";
 
 import SettingsStore from "../../../settings/SettingsStore";
 import { XOR } from "../../../@types/common";
@@ -71,7 +71,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
         );
     }
 
-    private get roomId(): string {
+    private get roomId(): string | null {
         // We should convert this to null for safety with the SettingsStore
         return this.props.roomId || null;
     }
@@ -110,7 +110,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
         });
     };
 
-    public render(): React.ReactElement {
+    public render(): ReactNode {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
         const { notification, showUnsentTooltip, forceCount, onClick } = this.props;
 
@@ -119,8 +119,8 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
             if (!notification.hasUnreadCount) return null; // Can't render a badge
         }
 
-        let label: string;
+        let label: string | undefined;
-        let tooltip: JSX.Element;
+        let tooltip: JSX.Element | undefined;
         if (showUnsentTooltip && this.state.showTooltip && notification.color === NotificationColor.Unsent) {
             label = _t("Message didn't send. Click for info.");
             tooltip = <Tooltip className="mx_RoleButton_tooltip" label={label} />;

src/components/views/rooms/ReadReceiptGroup.tsx

@@ -42,9 +42,9 @@ export const READ_AVATAR_SIZE = 16;
 interface Props {
     readReceipts: IReadReceiptProps[];
     readReceiptMap: { [userId: string]: IReadReceiptInfo };
-    checkUnmounting: () => boolean;
+    checkUnmounting?: () => boolean;
     suppressAnimation: boolean;
-    isTwelveHour: boolean;
+    isTwelveHour?: boolean;
 }
 
 interface IAvatarPosition {
@@ -169,8 +169,8 @@ export function ReadReceiptGroup({
         );
     }
 
-    let contextMenu;
+    let contextMenu: JSX.Element | undefined;
-    if (menuDisplayed) {
+    if (menuDisplayed && button.current) {
         const buttonRect = button.current.getBoundingClientRect();
         contextMenu = (
             <ContextMenu menuClassName="mx_ReadReceiptGroup_popup" onFinished={closeMenu} {...aboveLeftOf(buttonRect)}>
@@ -226,7 +226,7 @@ export function ReadReceiptGroup({
 }
 
 interface ReadReceiptPersonProps extends IReadReceiptProps {
-    isTwelveHour: boolean;
+    isTwelveHour?: boolean;
     onAfterClick?: () => void;
 }
 

src/components/views/rooms/ReadReceiptMarker.tsx

@@ -48,7 +48,7 @@ interface IProps {
     suppressAnimation?: boolean;
 
     // an opaque object for storing information about this user's RR in this room
-    readReceiptInfo: IReadReceiptInfo;
+    readReceiptInfo?: IReadReceiptInfo;
 
     // A function which is used to check if the parent panel is being
     // unmounted, to avoid unnecessary work. Should return true if we

src/components/views/rooms/RoomPreviewBar.tsx

@@ -215,9 +215,9 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
         if (!myMember) {
             return {};
         }
-        const kickerMember = this.props.room.currentState.getMember(myMember.events.member.getSender());
+        const kickerMember = this.props.room?.currentState.getMember(myMember.events.member.getSender());
         const memberName = kickerMember ? kickerMember.name : myMember.events.member.getSender();
-        const reason = myMember.events.member.getContent().reason;
+        const reason = myMember.events.member?.getContent().reason;
         return { memberName, reason };
     }
 
@@ -252,8 +252,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
         if (!myMember) {
             return false;
         }
-        const memberEvent = myMember.events.member;
+        const memberContent = myMember.events.member.getContent();
-        const memberContent = memberEvent.getContent();
         return memberContent.membership === "invite" && memberContent.is_direct;
     }
 
@@ -397,7 +396,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
                 const errCodeMessage = _t(
                     "An error (%(errcode)s) was returned while trying to validate your " +
                         "invite. You could try to pass this information on to the person who invited you.",
-                    { errcode: this.state.threePidFetchError.errcode || _t("unknown error code") },
+                    { errcode: this.state.threePidFetchError?.errcode || _t("unknown error code") },
                 );
                 switch (joinRule) {
                     case "invite":

src/components/views/rooms/RoomTile.tsx

@@ -204,7 +204,7 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
 
     private async generatePreview(): Promise<void> {
         if (!this.showMessagePreview) {
-            return null;
+            return;
         }
 
         const messagePreview = await MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag);

src/settings/SettingsStore.ts

@@ -511,7 +511,7 @@ export default class SettingsStore {
      * check at.
      * @return {boolean} True if the user may set the setting, false otherwise.
      */
-    public static canSetValue(settingName: string, roomId: string, level: SettingLevel): boolean {
+    public static canSetValue(settingName: string, roomId: string | null, level: SettingLevel): boolean {
         // Verify that the setting is actually a setting
         if (!SETTINGS[settingName]) {
             throw new Error("Setting '" + settingName + "' does not appear to be a setting.");

src/utils/EditorStateTransfer.ts

@@ -30,7 +30,7 @@ export default class EditorStateTransfer {
 
     public constructor(private readonly event: MatrixEvent) {}
 
-    public setEditorState(caret: DocumentOffset, serializedParts: SerializedPart[]): void {
+    public setEditorState(caret: DocumentOffset | null, serializedParts: SerializedPart[]): void {
         this.caret = caret;
         this.serializedParts = serializedParts;
     }

src/utils/EventUtils.ts

@@ -263,7 +263,7 @@ export function editEvent(
     }
 }
 
-export function canCancel(status: EventStatus): boolean {
+export function canCancel(status?: EventStatus | null): boolean {
     return status === EventStatus.QUEUED || status === EventStatus.NOT_SENT || status === EventStatus.ENCRYPTING;
 }
 

test/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx

@@ -80,7 +80,7 @@ describe("PreferencesUserSettingsTab", () => {
 
                 await waitFor(() => expect(toggle).toHaveAttribute("aria-disabled", "false"));
                 fireEvent.click(toggle);
-                expectSetValueToHaveBeenCalled("sendReadReceipts", undefined, SettingLevel.ACCOUNT, true);
+                expectSetValueToHaveBeenCalled("sendReadReceipts", null, SettingLevel.ACCOUNT, true);
             });
 
             it("can be disabled", async () => {
@@ -89,7 +89,7 @@ describe("PreferencesUserSettingsTab", () => {
 
                 await waitFor(() => expect(toggle).toHaveAttribute("aria-disabled", "false"));
                 fireEvent.click(toggle);
-                expectSetValueToHaveBeenCalled("sendReadReceipts", undefined, SettingLevel.ACCOUNT, false);
+                expectSetValueToHaveBeenCalled("sendReadReceipts", null, SettingLevel.ACCOUNT, false);
             });
         });
 
@@ -104,7 +104,7 @@ describe("PreferencesUserSettingsTab", () => {
 
                 await waitFor(() => expect(toggle).toHaveAttribute("aria-disabled", "false"));
                 fireEvent.click(toggle);
-                expectSetValueToHaveBeenCalled("sendReadReceipts", undefined, SettingLevel.ACCOUNT, true);
+                expectSetValueToHaveBeenCalled("sendReadReceipts", null, SettingLevel.ACCOUNT, true);
             });
 
             it("cannot be disabled", async () => {