Conform more of the codebase to strict types (#11162)

src/AddThreepid.ts

@@ -58,7 +58,7 @@ export type Binding = {
  * https://gist.github.com/jryans/839a09bf0c5a70e2f36ed990d50ed928
  */
 export default class AddThreepid {
-    private sessionId: string;
+    private sessionId?: string;
     private submitUrl?: string;
     private bind = false;
     private readonly clientSecret: string;
@@ -202,7 +202,7 @@ export default class AddThreepid {
                         throw new UserFriendlyError("No identity access token found");
                     }
                     await this.matrixClient.bindThreePid({
-                        sid: this.sessionId,
+                        sid: this.sessionId!,
                         client_secret: this.clientSecret,
                         id_server: getIdServerDomain(this.matrixClient),
                         id_access_token: identityAccessToken,
@@ -278,7 +278,7 @@ export default class AddThreepid {
      */
     private makeAddThreepidOnlyRequest = (auth?: IAddThreePidOnlyBody["auth"] | null): Promise<{}> => {
         return this.matrixClient.addThreePidOnly({
-            sid: this.sessionId,
+            sid: this.sessionId!,
             client_secret: this.clientSecret,
             auth: auth ?? undefined,
         });
@@ -302,13 +302,13 @@ export default class AddThreepid {
         if (this.submitUrl) {
             result = await this.matrixClient.submitMsisdnTokenOtherUrl(
                 this.submitUrl,
-                this.sessionId,
+                this.sessionId!,
                 this.clientSecret,
                 msisdnToken,
             );
         } else if (this.bind || !supportsSeparateAddAndBind) {
             result = await this.matrixClient.submitMsisdnToken(
-                this.sessionId,
+                this.sessionId!,
                 this.clientSecret,
                 msisdnToken,
                 await authClient.getAccessToken(),
@@ -323,7 +323,7 @@ export default class AddThreepid {
         if (supportsSeparateAddAndBind) {
             if (this.bind) {
                 await this.matrixClient.bindThreePid({
-                    sid: this.sessionId,
+                    sid: this.sessionId!,
                     client_secret: this.clientSecret,
                     id_server: getIdServerDomain(this.matrixClient),
                     id_access_token: await authClient.getAccessToken(),

src/Modal.tsx

@@ -29,9 +29,11 @@ const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
 const STATIC_DIALOG_CONTAINER_ID = "mx_Dialog_StaticContainer";
 
 // Type which accepts a React Component which looks like a Modal (accepts an onFinished prop)
-export type ComponentType = React.ComponentType<{
-    onFinished(...args: any): void;
-}>;
+export type ComponentType =
+    | React.ComponentType<{
+          onFinished(...args: any): void;
+      }>
+    | React.ComponentType<any>;
 
 // Generic type which returns the props of the Modal component with the onFinished being optional.
 export type ComponentProps<C extends ComponentType> = Defaultize<

src/NodeAnimator.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { Key, ReactElement, ReactInstance } from "react";
+import React, { Key, ReactElement, ReactFragment, ReactInstance, ReactPortal } from "react";
 import ReactDom from "react-dom";
 
 interface IChildProps {
@@ -33,6 +33,10 @@ interface IProps {
     startStyles: React.CSSProperties[];
 }
 
+function isReactElement(c: ReactElement | ReactFragment | ReactPortal): c is ReactElement {
+    return typeof c === "object" && "type" in c;
+}
+
 /**
  * The NodeAnimator contains components and animates transitions.
  * It will only pick up direct changes to properties ('left', currently), and so
@@ -72,7 +76,8 @@ export default class NodeAnimator extends React.Component<IProps> {
     private updateChildren(newChildren: React.ReactNode): void {
         const oldChildren = this.children || {};
         this.children = {};
-        React.Children.toArray(newChildren).forEach((c: ReactElement) => {
+        React.Children.toArray(newChildren).forEach((c) => {
+            if (!isReactElement(c)) return;
             if (oldChildren[c.key!]) {
                 const old = oldChildren[c.key!];
                 const oldNode = ReactDom.findDOMNode(this.nodes[old.key!]);

src/SecurityManager.ts

@@ -14,13 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ICryptoCallbacks } from "matrix-js-sdk/src/matrix";
+import { DeviceVerificationStatus, ICryptoCallbacks } from "matrix-js-sdk/src/matrix";
 import { ISecretStorageKeyInfo } from "matrix-js-sdk/src/crypto/api";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { deriveKey } from "matrix-js-sdk/src/crypto/key_passphrase";
 import { decodeRecoveryKey } from "matrix-js-sdk/src/crypto/recoverykey";
 import { encodeBase64 } from "matrix-js-sdk/src/crypto/olmlib";
-import { DeviceTrustLevel } from "matrix-js-sdk/src/crypto/CrossSigning";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import type CreateSecretStorageDialog from "./async-components/views/dialogs/security/CreateSecretStorageDialog";
@@ -241,7 +240,7 @@ async function onSecretRequested(
     deviceId: string,
     requestId: string,
     name: string,
-    deviceTrust: DeviceTrustLevel,
+    deviceTrust: DeviceVerificationStatus,
 ): Promise<string | undefined> {
     logger.log("onSecretRequested", userId, deviceId, requestId, name, deviceTrust);
     const client = MatrixClientPeg.safeGet();

src/SlashCommands.tsx

@@ -81,8 +81,8 @@ const singleMxcUpload = async (cli: MatrixClient): Promise<string | null> => {
     return new Promise((resolve) => {
         const fileSelector = document.createElement("input");
         fileSelector.setAttribute("type", "file");
-        fileSelector.onchange = (ev: HTMLInputEvent) => {
-            const file = ev.target.files?.[0];
+        fileSelector.onchange = (ev: Event) => {
+            const file = (ev as HTMLInputEvent).target.files?.[0];
             if (!file) return;
 
             Modal.createDialog(UploadConfirmDialog, {

src/autocomplete/EmojiProvider.tsx

@@ -47,9 +47,9 @@ interface ISortedEmoji {
 
 const SORTED_EMOJI: ISortedEmoji[] = EMOJI.sort((a, b) => {
     if (a.group === b.group) {
-        return a.order - b.order;
+        return a.order! - b.order!;
     }
-    return a.group - b.group;
+    return a.group! - b.group!;
 }).map((emoji, index) => ({
     emoji,
     // Include the index so that we can preserve the original order

src/emoji.ts

@@ -16,17 +16,11 @@ limitations under the License.
 
 import EMOJIBASE from "emojibase-data/en/compact.json";
 import SHORTCODES from "emojibase-data/en/shortcodes/iamcal.json";
+import { CompactEmoji } from "emojibase";
 
-export interface IEmoji {
-    label: string;
-    group: number;
-    hexcode: string;
-    order: number;
+export interface IEmoji extends Omit<CompactEmoji, "shortcodes"> {
+    // We generate a shortcode based on the label if none exist in the dataset
     shortcodes: string[];
-    tags?: string[];
-    unicode: string;
-    skins?: Omit<IEmoji, "shortcodes" | "tags">[]; // Currently unused
-    emoticon?: string | string[];
 }
 
 // The unicode is stored without the variant selector
@@ -74,7 +68,7 @@ export const DATA_BY_CATEGORY: Record<string, IEmoji[]> = {
 };
 
 // Store various mappings from unicode/emoticon/shortcode to the Emoji objects
-export const EMOJI: IEmoji[] = EMOJIBASE.map((emojiData: Omit<IEmoji, "shortcodes">) => {
+export const EMOJI: IEmoji[] = EMOJIBASE.map((emojiData) => {
     // If there's ever a gap in shortcode coverage, we fudge it by
     // filling it in with the emoji's CLDR annotation
     const shortcodeData = SHORTCODES[emojiData.hexcode] ?? [emojiData.label.toLowerCase().replace(/\W+/g, "_")];
@@ -88,7 +82,7 @@ export const EMOJI: IEmoji[] = EMOJIBASE.map((emojiData: Omit<IEmoji, "shortcode
     // We manually include regional indicators in the symbols group, since
     // Emojibase intentionally leaves them uncategorized
     const categoryId =
-        EMOJIBASE_GROUP_ID_TO_CATEGORY[emoji.group] ?? (isRegionalIndicator(emoji.unicode) ? "symbols" : null);
+        EMOJIBASE_GROUP_ID_TO_CATEGORY[emoji.group!] ?? (isRegionalIndicator(emoji.unicode) ? "symbols" : null);
 
     if (DATA_BY_CATEGORY.hasOwnProperty(categoryId)) {
         DATA_BY_CATEGORY[categoryId].push(emoji);

src/mjolnir/Mjolnir.ts

@@ -144,7 +144,12 @@ export class Mjolnir {
         this.updateLists(this._roomIds);
     };
 
-    private onListsChanged(settingName: string, roomId: string, atLevel: SettingLevel, newValue: string[]): void {
+    private onListsChanged(
+        settingName: string,
+        roomId: string | null,
+        atLevel: SettingLevel,
+        newValue: string[],
+    ): void {
         // We know that ban lists are only recorded at one level so we don't need to re-eval them
         this.updateLists(newValue);
     }

src/stores/right-panel/RightPanelStore.ts

@@ -47,7 +47,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
     private static internalInstance: RightPanelStore;
 
     private global?: IRightPanelForRoom;
-    private byRoom: { [roomId: string]: IRightPanelForRoom };
+    private byRoom: { [roomId: string]: IRightPanelForRoom } = {};
     private viewedRoomId: Optional<string>;
 
     private constructor() {