Conform more of the codebase to strictNullChecks (#10350

* Conform more of the codebase to `strictNullChecks`

* Iterate

* Generics ftw

* Iterate

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -23,6 +23,7 @@ import DialogButtons from "./DialogButtons";
 import AccessibleButton from "./AccessibleButton";
 import TabbedView, { Tab, TabLocation } from "../../structures/TabbedView";
 import PlatformPeg from "../../../PlatformPeg";
+import { NonEmptyArray } from "../../../@types/common";
 
 export function getDesktopCapturerSources(): Promise<Array<DesktopCapturerSource>> {
     const options: GetSourcesOptions = {
@@ -80,7 +81,7 @@ export interface PickerIState {
     selectedSource: DesktopCapturerSource | null;
 }
 export interface PickerIProps {
-    onFinished(sourceId: string): void;
+    onFinished(sourceId?: string): void;
 }
 
 export default class DesktopCapturerSourcePicker extends React.Component<PickerIProps, PickerIState> {
@@ -129,7 +130,7 @@ export default class DesktopCapturerSourcePicker extends React.Component<PickerI
     };
 
     private onCloseClick = (): void => {
-        this.props.onFinished(null);
+        this.props.onFinished();
     };
 
     private getTab(type: "screen" | "window", label: string): Tab {
@@ -150,7 +151,7 @@ export default class DesktopCapturerSourcePicker extends React.Component<PickerI
     }
 
     public render(): React.ReactNode {
-        const tabs = [
+        const tabs: NonEmptyArray<Tab> = [
             this.getTab("screen", _t("Share entire screen")),
             this.getTab("window", _t("Application window")),
         ];

src/components/views/elements/PowerSelector.tsx

@@ -25,7 +25,7 @@ import { objectHasDiff } from "../../../utils/objects";
 
 const CUSTOM_VALUE = "SELECT_VALUE_CUSTOM";
 
-interface IProps {
+interface Props<K extends undefined | string> {
     value: number;
     // The maximum value that can be set with the power selector
     maxValue: number;
@@ -35,13 +35,14 @@ interface IProps {
 
     // should the user be able to change the value? false by default.
     disabled?: boolean;
-    onChange?: (value: number, powerLevelKey: string) => void;
-
-    // Optional key to pass as the second argument to `onChange`
-    powerLevelKey?: string;
 
     // The name to annotate the selector with
     label?: string;
+
+    onChange(value: number, powerLevelKey: K extends undefined ? void : K): void;
+
+    // Optional key to pass as the second argument to `onChange`
+    powerLevelKey: K extends undefined ? void : K;
 }
 
 interface IState {
@@ -54,13 +55,13 @@ interface IState {
     custom?: boolean;
 }
 
-export default class PowerSelector extends React.Component<IProps, IState> {
-    public static defaultProps: Partial<IProps> = {
+export default class PowerSelector<K extends undefined | string> extends React.Component<Props<K>, IState> {
+    public static defaultProps: Partial<Props<any>> = {
         maxValue: Infinity,
         usersDefault: 0,
     };
 
-    public constructor(props: IProps) {
+    public constructor(props: Props<K>) {
         super(props);
 
         this.state = {
@@ -77,7 +78,7 @@ export default class PowerSelector extends React.Component<IProps, IState> {
         this.initStateFromProps();
     }
 
-    public componentDidUpdate(prevProps: Readonly<IProps>): void {
+    public componentDidUpdate(prevProps: Readonly<Props<K>>): void {
         if (objectHasDiff(this.props, prevProps)) {
             this.initStateFromProps();
         }

src/components/views/elements/QRCode.tsx

@@ -31,7 +31,7 @@ const defaultOptions: QRCodeToDataURLOptions = {
 };
 
 const QRCode: React.FC<IProps> = ({ data, className, ...options }) => {
-    const [dataUri, setUri] = React.useState<string>(null);
+    const [dataUri, setUri] = React.useState<string | null>(null);
     React.useEffect(() => {
         let cancelled = false;
         toDataURL(data, { ...defaultOptions, ...options }).then((uri) => {

src/components/views/elements/ReplyChain.tsx

@@ -63,7 +63,7 @@ interface IState {
     // The loaded events to be rendered as linear-replies
     events: MatrixEvent[];
     // The latest loaded event which has not yet been shown
-    loadedEv: MatrixEvent;
+    loadedEv: MatrixEvent | null;
     // Whether the component is still loading more events
     loading: boolean;
     // Whether as error was encountered fetching a replied to event.
@@ -145,7 +145,7 @@ export default class ReplyChain extends React.Component<IProps, IState> {
         }
     }
 
-    private async getNextEvent(ev: MatrixEvent): Promise<MatrixEvent> {
+    private async getNextEvent(ev: MatrixEvent): Promise<MatrixEvent | null> {
         try {
             const inReplyToEventId = getParentEventId(ev);
             return await this.getEvent(inReplyToEventId);
@@ -154,7 +154,7 @@ export default class ReplyChain extends React.Component<IProps, IState> {
         }
     }
 
-    private async getEvent(eventId: string): Promise<MatrixEvent> {
+    private async getEvent(eventId: string): Promise<MatrixEvent | null> {
         if (!eventId) return null;
         const event = this.room.findEventById(eventId);
         if (event) return event;
@@ -168,7 +168,7 @@ export default class ReplyChain extends React.Component<IProps, IState> {
             // Return null as it is falsy and thus should be treated as an error (as the event cannot be resolved).
             return null;
         }
-        return this.room.findEventById(eventId);
+        return this.room.findEventById(eventId) ?? null;
     }
 
     public canCollapse = (): boolean => {
@@ -182,7 +182,7 @@ export default class ReplyChain extends React.Component<IProps, IState> {
     private onQuoteClick = async (event: ButtonEvent): Promise<void> => {
         const events = [this.state.loadedEv, ...this.state.events];
 
-        let loadedEv = null;
+        let loadedEv: MatrixEvent | null = null;
         if (events.length > 0) {
             loadedEv = await this.getNextEvent(events[0]);
         }
@@ -200,7 +200,7 @@ export default class ReplyChain extends React.Component<IProps, IState> {
     }
 
     public render(): React.ReactNode {
-        let header = null;
+        let header: JSX.Element | undefined;
         if (this.state.err) {
             header = (
                 <blockquote className="mx_ReplyChain mx_ReplyChain_error">

src/components/views/elements/Slider.tsx

@@ -81,7 +81,7 @@ export default class Slider extends React.Component<IProps> {
             />
         ));
 
-        let selection = null;
+        let selection: JSX.Element | undefined;
 
         if (!this.props.disabled) {
             const offset = this.offset(this.props.values, this.props.value);

src/components/views/elements/TruncatedList.tsx

@@ -21,7 +21,7 @@ import { _t } from "../../../languageHandler";
 
 interface IProps {
     // The number of elements to show before truncating. If negative, no truncation is done.
-    truncateAt?: number;
+    truncateAt: number;
     // The className to apply to the wrapping div
     className?: string;
     // A function that returns the children to be rendered into the element.
@@ -34,7 +34,7 @@ interface IProps {
     getChildCount?: () => number;
     // A function which will be invoked when an overflow element is required.
     // This will be inserted after the children.
-    createOverflowElement?: (overflowCount: number, totalCount: number) => React.ReactNode;
+    createOverflowElement: (overflowCount: number, totalCount: number) => React.ReactNode;
     children?: ReactNode;
 }
 
@@ -71,8 +71,8 @@ export default class TruncatedList extends React.Component<IProps> {
         }
     }
 
-    public render(): React.ReactNode {
-        let overflowNode = null;
+    public render(): ReactNode {
+        let overflowNode: ReactNode | undefined;
 
         const totalChildren = this.getChildCount();
         let upperBound = totalChildren;