Add @typescript-eslint/no-base-to-string (#10091)

.eslintrc.js

@@ -1,6 +1,9 @@
 module.exports = {
     plugins: ["matrix-org"],
     extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
+    parserOptions: {
+        project: ["./tsconfig.json"],
+    },
     env: {
         browser: true,
         node: true,
@@ -168,6 +171,12 @@ module.exports = {
                 "@typescript-eslint/explicit-member-accessibility": "off",
             },
         },
+        {
+            files: ["cypress/**/*.ts"],
+            parserOptions: {
+                project: ["./cypress/tsconfig.json"],
+            },
+        },
     ],
     settings: {
         react: {

package.json

@@ -190,7 +190,7 @@
         "eslint-plugin-deprecate": "^0.7.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-matrix-org": "0.9.0",
+        "eslint-plugin-matrix-org": "0.10.0",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
         "eslint-plugin-unicorn": "^45.0.0",

src/components/views/dialogs/ServerOfflineDialog.tsx

@@ -48,7 +48,8 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
     private renderTimeline(): React.ReactElement[] {
         return EchoStore.instance.contexts.map((c, i) => {
             if (!c.firstFailedTime) return null; // not useful
-            if (!(c instanceof RoomEchoContext)) throw new Error("Cannot render unknown context: " + c);
+            if (!(c instanceof RoomEchoContext))
+                throw new Error("Cannot render unknown context: " + c.constructor.name);
             const header = (
                 <div className="mx_ServerOfflineDialog_content_context_timeline_header">
                     <RoomAvatar width={24} height={24} room={c.room} />

src/components/views/settings/ProfileSettings.tsx

@@ -185,6 +185,10 @@ export default class ProfileSettings extends React.Component<{}, IState> {
             withDisplayName: true,
         });
 
+        // False negative result from no-base-to-string rule, doesn't seem to account for Symbol.toStringTag
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string
+        const avatarUrl = this.state.avatarUrl?.toString();
+
         return (
             <form onSubmit={this.saveProfile} autoComplete="off" noValidate={true} className="mx_ProfileSettings">
                 <input
@@ -216,7 +220,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
                         </p>
                     </div>
                     <AvatarSetting
-                        avatarUrl={this.state.avatarUrl?.toString()}
+                        avatarUrl={avatarUrl}
                         avatarName={this.state.displayName || this.state.userId}
                         avatarAltText={_t("Profile picture")}
                         uploadAvatar={this.uploadAvatar}

src/rageshake/submit-rageshake.ts

@@ -260,7 +260,7 @@ export async function downloadBugReport(opts: IOpts = {}): Promise<void> {
                 reader.readAsArrayBuffer(value as Blob);
             });
         } else {
-            metadata += `${key} = ${value}\n`;
+            metadata += `${key} = ${value as string}\n`;
         }
     }
     tape.append("issue.txt", metadata);

src/stores/widgets/StopGapWidget.ts

@@ -389,7 +389,7 @@ export class StopGapWidget extends EventEmitter {
                     // Now open the integration manager
                     // TODO: Spec this interaction.
                     const data = ev.detail.data;
-                    const integType = data?.integType;
+                    const integType = data?.integType as string;
                     const integId = <string>data?.integId;
 
                     // noinspection JSIgnoredPromiseFromCall

src/utils/FileUtils.ts

@@ -69,7 +69,7 @@ export function presentableTextForFile(
         // it since it is "ugly", users generally aren't aware what it
         // means and the type of the attachment can usually be inferred
         // from the file extension.
-        text += " (" + filesize(content.info.size) + ")";
+        text += " (" + <string>filesize(content.info.size) + ")";
     }
     return text;
 }

src/utils/Whenable.ts

@@ -19,15 +19,15 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { IDestroyable } from "./IDestroyable";
 import { arrayFastClone } from "./arrays";
 
-export type WhenFn<T> = (w: Whenable<T>) => void;
+export type WhenFn<T extends string | number> = (w: Whenable<T>) => void;
 
 /**
  * Whenables are a cheap way to have Observable patterns mixed with typical
  * usage of Promises, without having to tear down listeners or calls. Whenables
  * are intended to be used when a condition will be met multiple times and
  * the consumer needs to know *when* that happens.
  */
-export abstract class Whenable<T> implements IDestroyable {
+export abstract class Whenable<T extends string | number> implements IDestroyable {
     private listeners: { condition: T | null; fn: WhenFn<T> }[] = [];
 
     /**

src/utils/exportUtils/HtmlExport.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode } from "react";
+import React from "react";
 import ReactDOM from "react-dom";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
@@ -65,7 +65,7 @@ export default class HTMLExporter extends Exporter {
         this.threadsEnabled = SettingsStore.getValue("feature_threadenabled");
     }
 
-    protected async getRoomAvatar(): Promise<ReactNode> {
+    protected async getRoomAvatar(): Promise<string> {
         let blob: Blob | undefined = undefined;
         const avatarUrl = Avatar.avatarUrlForRoom(this.room, 32, 32, "crop");
         const avatarPath = "room.png";

yarn.lock

@@ -4226,10 +4226,10 @@ eslint-plugin-jsx-a11y@^6.5.1:
     minimatch "^3.1.2"
     semver "^6.3.0"
 
-eslint-plugin-matrix-org@0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-matrix-org/-/eslint-plugin-matrix-org-0.9.0.tgz#b2a5186052ddbfa7dc9878779bafa5d68681c7b4"
-  integrity sha512-+j6JuMnFH421Z2vOxc+0YMt5Su5vD76RSatviy3zHBaZpgd+sOeAWoCLBHD5E7mMz5oKae3Y3wewCt9LRzq2Nw==
+eslint-plugin-matrix-org@0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-matrix-org/-/eslint-plugin-matrix-org-0.10.0.tgz#8d0998641a4d276343cae2abf253a01bb4d4cc60"
+  integrity sha512-L7ail0x1yUlF006kn4mHc+OT8/aYZI++i852YXPHxCbM1EY7jeg/fYAQ8tCx5+x08LyqXeS7inAVSL784m0C6Q==
 
 eslint-plugin-react-hooks@^4.3.0:
   version "4.6.0"