Improve quality of Typescripting (#25232)

src/async-components/structures/CompatibilityView.tsx

@@ -30,7 +30,7 @@ const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
     const brand = SdkConfig.get("brand");
     const mobileBuilds = SdkConfig.get("mobile_builds");
 
-    let ios = null;
+    let ios: JSX.Element | undefined;
     const iosCustomUrl = mobileBuilds?.ios;
     if (iosCustomUrl !== null) {
         // could be undefined or a string

src/components/views/auth/VectorAuthFooter.tsx

@@ -27,7 +27,7 @@ const VectorAuthFooter = (): ReactElement => {
         { text: "GitHub", url: "https://github.com/vector-im/element-web" },
     ];
 
-    const authFooterLinks = [];
+    const authFooterLinks: JSX.Element[] = [];
     for (const linkEntry of links) {
         authFooterLinks.push(
             <a href={linkEntry.url} key={linkEntry.text} target="_blank" rel="noreferrer noopener">

src/favicon.ts

@@ -49,7 +49,7 @@ export default class Favicon {
     private readonly params: IParams;
     private readonly canvas: HTMLCanvasElement;
     private readonly baseImage: HTMLImageElement;
-    private context: CanvasRenderingContext2D;
+    private context!: CanvasRenderingContext2D;
     private icons: HTMLLinkElement[];
 
     private isReady = false;

src/vector/index.ts

@@ -19,6 +19,7 @@ limitations under the License.
 */
 
 import { logger } from "matrix-js-sdk/src/logger";
+import { extractErrorMessageFromError } from "matrix-react-sdk/src/components/views/dialogs/ErrorDialog";
 
 // These are things that can run before the skin loads - be careful not to reference the react-sdk though.
 import { parseQsFromFragment } from "./url_utils";
@@ -194,7 +195,7 @@ async function start(): Promise<void> {
             await loadConfigPromise;
         } catch (error) {
             // Now that we've loaded the theme (CSS), display the config syntax error if needed.
-            if (error.err && error.err instanceof SyntaxError) {
+            if (error instanceof SyntaxError) {
                 // This uses the default brand since the app config is unavailable.
                 return showError(_t("Your Element is misconfigured"), [
                     _t(
@@ -202,7 +203,7 @@ async function start(): Promise<void> {
                             "Please correct the problem and reload the page.",
                     ),
                     _t("The message from the parser is: %(message)s", {
-                        message: error.err.message || _t("Invalid JSON"),
+                        message: error.message || _t("Invalid JSON"),
                     }),
                 ]);
             }
@@ -231,7 +232,7 @@ async function start(): Promise<void> {
         // Like the compatibility page, AWOOOOOGA at the user
         // This uses the default brand since the app config is unavailable.
         await showError(_t("Your Element is misconfigured"), [
-            err.translatedMessage || _t("Unexpected error preparing the app. See console for details."),
+            extractErrorMessageFromError(err, _t("Unexpected error preparing the app. See console for details.")),
         ]);
     }
 }

src/vector/platform/VectorBasePlatform.ts

@@ -28,7 +28,7 @@ import Favicon from "../../favicon";
  * Vector-specific extensions to the BasePlatform template
  */
 export default abstract class VectorBasePlatform extends BasePlatform {
-    protected _favicon: Favicon;
+    protected _favicon?: Favicon;
 
     public async getConfig(): Promise<IConfigOptions | undefined> {
         return getVectorConfig();

tsconfig.json

@@ -18,5 +18,15 @@
         "strictBindCallApply": true,
         "noImplicitThis": true
     },
-    "include": ["./src/**/*.ts", "./src/**/*.tsx", "./test/**/*.ts", "./test/**/*.tsx"]
+    "include": [
+        "./node_modules/matrix-js-sdk/src/@types/*.d.ts",
+        "./node_modules/matrix-react-sdk/src/@types/diff-dom.d.ts",
+        "./node_modules/matrix-react-sdk/src/@types/opus-recorder.d.ts",
+        "./node_modules/matrix-react-sdk/src/@types/png-chunks-extract.d.ts",
+        "./node_modules/matrix-react-sdk/src/@types/sanitize-html.d.ts",
+        "./src/**/*.ts",
+        "./src/**/*.tsx",
+        "./test/**/*.ts",
+        "./test/**/*.tsx"
+    ]
 }