Fix typing

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/ContentMessages.tsx

@@ -386,7 +386,7 @@ export default class ContentMessages {
         const isQuoting = Boolean(RoomViewStore.getQuotingEvent());
         if (isQuoting) {
             const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-            const {finished} = Modal.createTrackedDialog('Upload Reply Warning', '', QuestionDialog, {
+            const {finished} = Modal.createTrackedDialog<[boolean]>('Upload Reply Warning', '', QuestionDialog, {
                 title: _t('Replying With Files'),
                 description: (
                     <div>{_t(
@@ -397,7 +397,7 @@ export default class ContentMessages {
                 hasCancelButton: true,
                 button: _t("Continue"),
             });
-            const [shouldUpload]: [boolean] = await finished;
+            const [shouldUpload] = await finished;
             if (!shouldUpload) return;
         }
 
@@ -420,12 +420,12 @@ export default class ContentMessages {
 
         if (tooBigFiles.length > 0) {
             const UploadFailureDialog = sdk.getComponent("dialogs.UploadFailureDialog");
-            const {finished} = Modal.createTrackedDialog('Upload Failure', '', UploadFailureDialog, {
+            const {finished} = Modal.createTrackedDialog<[boolean]>('Upload Failure', '', UploadFailureDialog, {
                 badFiles: tooBigFiles,
                 totalFiles: files.length,
                 contentMessages: this,
             });
-            const [shouldContinue]: [boolean] = await finished;
+            const [shouldContinue] = await finished;
             if (!shouldContinue) return;
         }
 
@@ -437,12 +437,12 @@ export default class ContentMessages {
         for (let i = 0; i < okFiles.length; ++i) {
             const file = okFiles[i];
             if (!uploadAll) {
-                const {finished} = Modal.createTrackedDialog('Upload Files confirmation', '', UploadConfirmDialog, {
+                const {finished} = Modal.createTrackedDialog<[boolean, boolean]>('Upload Files confirmation', '', UploadConfirmDialog, {
                     file,
                     currentIndex: i,
                     totalFiles: okFiles.length,
                 });
-                const [shouldContinue, shouldUploadAll]: [boolean, boolean] = await finished;
+                const [shouldContinue, shouldUploadAll] = await finished;
                 if (!shouldContinue) break;
                 if (shouldUploadAll) {
                     uploadAll = true;

src/Modal.tsx

@@ -44,7 +44,9 @@ interface IHandle<T extends any[]> {
 }
 
 interface IProps<T extends any[]> {
-    onFinished(...args: T): void;
+    onFinished?(...args: T): void;
+    // TODO improve typing here once all Modals are TS and we can exhaustively check the props
+    [key: string]: any;
 }
 
 interface IOptions<T extends any[]> {
@@ -95,48 +97,54 @@ export class ModalManager {
         return this.priorityModal || this.staticModal || this.modals.length > 0;
     }
 
-    public createTrackedDialog(
+    public createTrackedDialog<T extends any[]>(
         analyticsAction: string,
         analyticsInfo: string,
         ...rest: Parameters<ModalManager["createDialog"]>
     ) {
         Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
-        return this.createDialog(...rest);
+        return this.createDialog<T>(...rest);
     }
 
-    public appendTrackedDialog(
+    public appendTrackedDialog<T extends any[]>(
         analyticsAction: string,
         analyticsInfo: string,
         ...rest: Parameters<ModalManager["appendDialog"]>
     ) {
         Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
-        return this.appendDialog(...rest);
+        return this.appendDialog<T>(...rest);
     }
 
-    public createDialog(Element: React.ComponentType, ...rest: ParametersWithoutFirst<ModalManager["createDialogAsync"]>) {
+    public createDialog<T extends any[]>(
-        return this.createDialogAsync(Promise.resolve(Element), ...rest);
+        Element: React.ComponentType,
+        ...rest: ParametersWithoutFirst<ModalManager["createDialogAsync"]>
+    ) {
+        return this.createDialogAsync<T>(Promise.resolve(Element), ...rest);
     }
 
-    public appendDialog(Element: React.ComponentType, ...rest: ParametersWithoutFirst<ModalManager["appendDialogAsync"]>) {
+    public appendDialog<T extends any[]>(
-        return this.appendDialogAsync(Promise.resolve(Element), ...rest);
+        Element: React.ComponentType,
+        ...rest: ParametersWithoutFirst<ModalManager["appendDialogAsync"]>
+    ) {
+        return this.appendDialogAsync<T>(Promise.resolve(Element), ...rest);
     }
 
-    public createTrackedDialogAsync(
+    public createTrackedDialogAsync<T extends any[]>(
         analyticsAction: string,
         analyticsInfo: string,
         ...rest: Parameters<ModalManager["appendDialogAsync"]>
     ) {
         Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
-        return this.createDialogAsync(...rest);
+        return this.createDialogAsync<T>(...rest);
     }
 
-    public appendTrackedDialogAsync(
+    public appendTrackedDialogAsync<T extends any[]>(
         analyticsAction: string,
         analyticsInfo: string,
         ...rest: Parameters<ModalManager["appendDialogAsync"]>
     ) {
         Analytics.trackEvent('Modal', analyticsAction, analyticsInfo);
-        return this.appendDialogAsync(...rest);
+        return this.appendDialogAsync<T>(...rest);
     }
 
     private buildModal<T extends any[]>(
@@ -250,9 +258,9 @@ export class ModalManager {
      * @param {onBeforeClose} options.onBeforeClose a callback to decide whether to close the dialog
      * @returns {object} Object with 'close' parameter being a function that will close the dialog
      */
-    private createDialogAsync<T extends any[], CT extends React.ComponentType>(
+    private createDialogAsync<T extends any[]>(
-        prom: Promise<CT>,
+        prom: Promise<React.ComponentType>,
-        props?: IProps<T> & React.ComponentProps<CT>,
+        props?: IProps<T>,
         className?: string,
         isPriorityModal = false,
         isStaticModal = false,

src/SlashCommands.tsx

@@ -400,14 +400,16 @@ export const Commands = [
                     // If we need an identity server but don't have one, things
                     // get a bit more complex here, but we try to show something
                     // meaningful.
-                    let finished = Promise.resolve();
+                    let prom = Promise.resolve();
                     if (
                         getAddressType(address) === 'email' &&
                         !MatrixClientPeg.get().getIdentityServerUrl()
                     ) {
                         const defaultIdentityServerUrl = getDefaultIdentityServerUrl();
                         if (defaultIdentityServerUrl) {
-                            ({ finished } = Modal.createTrackedDialog('Slash Commands', 'Identity server',
+                            const { finished } = Modal.createTrackedDialog<[boolean]>(
+                                'Slash Commands',
+                                'Identity server',
                                 QuestionDialog, {
                                     title: _t("Use an identity server"),
                                     description: <p>{_t(
@@ -420,9 +422,9 @@ export const Commands = [
                                     )}</p>,
                                     button: _t("Continue"),
                                 },
-                            ));
+                            );
 
-                            finished = finished.then(([useDefault]: any) => {
+                            prom = finished.then(([useDefault]) => {
                                 if (useDefault) {
                                     useDefaultIdentityServer();
                                     return;
@@ -434,7 +436,7 @@ export const Commands = [
                         }
                     }
                     const inviter = new MultiInviter(roomId);
-                    return success(finished.then(() => {
+                    return success(prom.then(() => {
                         return inviter.invite([address]);
                     }).then(() => {
                         if (inviter.getCompletionState(address) !== "invited") {