Make more of the codebase conform to strict types (#10857)

src/components/views/elements/AppPermission.tsx

@@ -38,7 +38,7 @@ interface IProps {
 }
 
 interface IState {
-    roomMember: RoomMember;
+    roomMember: RoomMember | null;
     isWrapped: boolean;
     widgetDomain: string | null;
 }
@@ -56,7 +56,7 @@ export default class AppPermission extends React.Component<IProps, IState> {
 
         // The second step is to find the user's profile so we can show it on the prompt
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
-        let roomMember;
+        let roomMember: RoomMember | null = null;
         if (room) roomMember = room.getMember(this.props.creatorUserId);
 
         // Set all this into the initial state

src/components/views/elements/AppTile.tsx

@@ -126,7 +126,7 @@ export default class AppTile extends React.Component<IProps, IState> {
     private persistKey: string;
     private sgWidget: StopGapWidget | null;
     private dispatcherRef?: string;
-    private unmounted: boolean;
+    private unmounted = false;
 
     public constructor(props: IProps) {
         super(props);

src/components/views/elements/Field.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, RefObject } from "react";
+import React, { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, RefObject, createRef } from "react";
 import classNames from "classnames";
 import { debounce } from "lodash";
 
@@ -118,7 +118,7 @@ interface IState {
 
 export default class Field extends React.PureComponent<PropShapes, IState> {
     private readonly id: string;
-    private inputRef: RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
+    private readonly _inputRef = createRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>();
 
     public static readonly defaultProps = {
         element: "input",
@@ -228,6 +228,10 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         return valid;
     }
 
+    private get inputRef(): RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> {
+        return this.props.inputRef ?? this._inputRef;
+    }
+
     public render(): React.ReactNode {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
         const {
@@ -249,8 +253,6 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
             ...inputProps
         } = this.props;
 
-        this.inputRef = inputRef || React.createRef();
-
         // Handle displaying feedback on validity
         let fieldTooltip: JSX.Element | undefined;
         if (tooltipContent || this.state.feedback) {

src/components/views/elements/InteractiveTooltip.tsx

@@ -302,7 +302,7 @@ interface IState {
  * tooltip along one edge of the target.
  */
 export default class InteractiveTooltip extends React.Component<IProps, IState> {
-    private target: HTMLElement;
+    private target?: HTMLElement;
 
     public static defaultProps = {
         side: Direction.Top,
@@ -345,6 +345,7 @@ export default class InteractiveTooltip extends React.Component<IProps, IState>
 
     private onLeftOfTarget(): boolean {
         const { contentRect } = this.state;
+        if (!this.target) return false;
         const targetRect = this.target.getBoundingClientRect();
 
         if (this.props.direction === Direction.Left) {
@@ -359,6 +360,7 @@ export default class InteractiveTooltip extends React.Component<IProps, IState>
 
     private aboveTarget(): boolean {
         const { contentRect } = this.state;
+        if (!this.target) return false;
         const targetRect = this.target.getBoundingClientRect();
 
         if (this.props.direction === Direction.Top) {
@@ -378,7 +380,7 @@ export default class InteractiveTooltip extends React.Component<IProps, IState>
     private onMouseMove = (ev: MouseEvent): void => {
         const { clientX: x, clientY: y } = ev;
         const { contentRect } = this.state;
-        if (!contentRect) return;
+        if (!contentRect || !this.target) return;
         const targetRect = this.target.getBoundingClientRect();
 
         let direction: Direction;
@@ -423,6 +425,8 @@ export default class InteractiveTooltip extends React.Component<IProps, IState>
             return null;
         }
 
+        if (!this.target) return null;
+
         const targetRect = this.target.getBoundingClientRect();
 
         // The window X and Y offsets are to adjust position when zoomed in to page