Upgrade to TypeScript 7 (#34208)

* Upgrade to TypeScript 7

for massive tsc speed gains

Those on WebStorm will want to upgrade to EAP to reap the benefits of the new TSGo compiler

Some things (module-api & shared-components) which utilise unplugin-dts (and api-extractor) need to hold a copy of ts6 for its conventional lib format and API. TS7 ships with no API until TS7.1.

Other things which use eslint also need ts6 for typescript-eslint.

Some type changes were necessary as TS7 caught some issues.

* Add knip exception

* Fix bad merge

apps/desktop/package.json

@@ -78,6 +78,7 @@
         "@types/minimist": "^1.2.1",
         "@types/node": "catalog:",
         "@types/pacote": "^11.1.1",
+        "@typescript/native": "catalog:",
         "app-builder-lib": "26.15.3",
         "chokidar": "^5.0.0",
         "detect-libc": "^2.0.0",
@@ -93,7 +94,7 @@
         "rimraf": "^6.0.0",
         "shared-types": "workspace:*",
         "tar": "^7.5.8",
-        "typescript": "catalog:",
+        "typescript": "catalog:ts6",
         "vitest": "catalog:"
     },
     "hakDependencies": {

apps/web/package.json

@@ -159,6 +159,7 @@
         "@types/semver": "^7.5.8",
         "@types/tar-js": "^0.3.5",
         "@types/ua-parser-js": "^0.7.36",
+        "@typescript/native": "catalog:",
         "@vitest/spy": "catalog:",
         "babel-jest": "^30.0.0",
         "babel-loader": "^10.0.0",
@@ -206,7 +207,7 @@
         "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",
         "testcontainers": "^12.0.0",
-        "typescript": "catalog:",
+        "typescript": "catalog:ts6",
         "util": "^0.12.5",
         "vitest": "catalog:",
         "vitest-canvas-mock": "^1.1.4",

apps/web/src/accessibility/context_menu/ContextMenuButton.tsx

@@ -12,15 +12,15 @@ import React, { type Ref, type JSX } from "react";
 
 import AccessibleButton, { type ButtonProps } from "../../components/views/elements/AccessibleButton";
 
-type Props<T extends keyof HTMLElementTagNameMap> = ButtonProps<T> & {
+type Props = Omit<ButtonProps<"div">, "element" | "ref"> & {
     label?: string;
     // whether the context menu is currently open
     isExpanded: boolean;
-    ref?: Ref<HTMLElementTagNameMap[T]>;
+    ref?: Ref<HTMLElement>;
 };
 
 // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
-export const ContextMenuButton = function <T extends keyof HTMLElementTagNameMap>({
+export const ContextMenuButton = function ({
     label,
     isExpanded,
     children,
@@ -28,7 +28,7 @@ export const ContextMenuButton = function <T extends keyof HTMLElementTagNameMap
     onContextMenu,
     ref,
     ...props
-}: Props<T>): JSX.Element {
+}: Props): JSX.Element {
     return (
         <AccessibleButton
             {...props}

apps/web/src/accessibility/context_menu/ContextMenuTooltipButton.tsx

@@ -8,24 +8,25 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX } from "react";
+import React, { type JSX, type Ref } from "react";
 
 import AccessibleButton, { type ButtonProps } from "../../components/views/elements/AccessibleButton";
 
-type Props<T extends keyof HTMLElementTagNameMap> = ButtonProps<T> & {
+type Props = Omit<ButtonProps<"div">, "element" | "ref"> & {
     // whether the context menu is currently open
     isExpanded: boolean;
+    ref?: Ref<HTMLElement>;
 };
 
 // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
-export const ContextMenuTooltipButton = function <T extends keyof HTMLElementTagNameMap>({
+export const ContextMenuTooltipButton = function ({
     isExpanded,
     children,
     onClick,
     onContextMenu,
     ref,
     ...props
-}: Props<T>): JSX.Element {
+}: Props): JSX.Element {
     return (
         <AccessibleButton
             {...props}

apps/web/src/components/views/elements/SettingsFlag.tsx

@@ -15,17 +15,17 @@ import { logger } from "matrix-js-sdk/src/logger";
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
 import { type SettingLevel } from "../../../settings/SettingLevel";
-import { type BooleanSettingKey, defaultWatchManager } from "../../../settings/Settings";
+import { type NullableBooleanSettingKey, defaultWatchManager } from "../../../settings/Settings";
 
 interface IProps {
     // The setting must be a boolean
-    name: BooleanSettingKey;
+    name: NullableBooleanSettingKey;
     level: SettingLevel;
     roomId?: string; // for per-room settings
     label?: string;
     isExplicit?: boolean;
     hideIfCannotSet?: boolean;
-    requires?: BooleanSettingKey[];
+    requires?: NullableBooleanSettingKey[];
     onChange?(checked: boolean): void;
 }
 

apps/web/src/settings/Settings.tsx

@@ -372,9 +372,16 @@ export interface Settings {
 export type SettingKey = keyof Settings;
 export type FeatureSettingKey = Assignable<Settings, IFeature>;
 export type BooleanSettingKey = Assignable<Settings, IBaseSetting<boolean>> | FeatureSettingKey;
+export type NullableBooleanSettingKey = Assignable<Settings, IBaseSetting<boolean | null>> | FeatureSettingKey;
 export type StringSettingKey = Assignable<Settings, IBaseSetting<string>>;
 
 export const SETTINGS: Settings = {
+    // Used in tests only
+    "test_setting": {
+        supportedLevels: [],
+        default: "",
+    },
+
     "feature_video_rooms": {
         isFeature: true,
         labsGroup: LabGroup.VoiceAndVideo,

apps/web/src/settings/controllers/IncompatibleController.ts

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import SettingController from "./SettingController";
 import { type SettingLevel } from "../SettingLevel";
-import { type BooleanSettingKey } from "../Settings.tsx";
+import { type SettingKey, type Settings } from "../Settings.tsx";
 import PlatformPeg from "../../PlatformPeg.ts";
 
 /**
@@ -16,11 +16,16 @@ import PlatformPeg from "../../PlatformPeg.ts";
  * is also enabled, to prevent cascading undefined behaviour between conflicting
  * labs flags.
  */
-export default class IncompatibleController extends SettingController {
+export default class IncompatibleController<
+    ControlledSetting extends SettingKey,
+    WatchedSetting extends SettingKey,
+> extends SettingController {
     public constructor(
-        private settingName: BooleanSettingKey,
-        private forcedValue: any = false,
-        private incompatibleValue: any | ((v: any) => boolean) = true,
+        private settingName: WatchedSetting,
+        private forcedValue: Settings[ControlledSetting]["default"] = false,
+        private incompatibleValue:
+            | Settings[WatchedSetting]["default"]
+            | ((v: Settings[WatchedSetting]["default"]) => boolean) = true,
         private readonly disabledMessage?: string,
         private readonly forceReload = false,
     ) {

apps/web/test/unit-tests/settings/controllers/IncompatibleController-test.ts

@@ -9,7 +9,12 @@ Please see LICENSE files in the repository root for full details.
 import IncompatibleController from "../../../../src/settings/controllers/IncompatibleController";
 import { SettingLevel } from "../../../../src/settings/SettingLevel";
 import SettingsStore from "../../../../src/settings/SettingsStore";
-import { type FeatureSettingKey } from "../../../../src/settings/Settings.tsx";
+
+declare module "../../../../src/settings/Settings.tsx" {
+    interface Settings {
+        test_setting: IBaseSetting<string>;
+    }
+}
 
 describe("IncompatibleController", () => {
     const settingsGetValueSpy = jest.spyOn(SettingsStore, "getValue");
@@ -21,17 +26,17 @@ describe("IncompatibleController", () => {
         describe("when incompatibleValue is not set", () => {
             it("returns true when setting value is true", () => {
                 // no incompatible value set, defaulted to true
-                const controller = new IncompatibleController("feature_spotlight" as FeatureSettingKey, { key: null });
+                const controller = new IncompatibleController("test_setting", { key: null });
                 settingsGetValueSpy.mockReturnValue(true);
                 // true === true
                 expect(controller.incompatibleSetting).toBe(true);
                 expect(controller.settingDisabled).toEqual(true);
-                expect(settingsGetValueSpy).toHaveBeenCalledWith("feature_spotlight");
+                expect(settingsGetValueSpy).toHaveBeenCalledWith("test_setting");
             });
 
             it("returns false when setting value is not true", () => {
                 // no incompatible value set, defaulted to true
-                const controller = new IncompatibleController("feature_spotlight" as FeatureSettingKey, { key: null });
+                const controller = new IncompatibleController("test_setting", { key: null });
                 settingsGetValueSpy.mockReturnValue("test");
                 expect(controller.incompatibleSetting).toBe(false);
             });
@@ -39,21 +44,13 @@ describe("IncompatibleController", () => {
 
         describe("when incompatibleValue is set to a value", () => {
             it("returns true when setting value matches incompatible value", () => {
-                const controller = new IncompatibleController(
-                    "feature_spotlight" as FeatureSettingKey,
-                    { key: null },
-                    "test",
-                );
+                const controller = new IncompatibleController("test_setting", { key: null }, "test");
                 settingsGetValueSpy.mockReturnValue("test");
                 expect(controller.incompatibleSetting).toBe(true);
             });
 
             it("returns false when setting value is not true", () => {
-                const controller = new IncompatibleController(
-                    "feature_spotlight" as FeatureSettingKey,
-                    { key: null },
-                    "test",
-                );
+                const controller = new IncompatibleController("test_setting", { key: null }, "test");
                 settingsGetValueSpy.mockReturnValue("not test");
                 expect(controller.incompatibleSetting).toBe(false);
             });
@@ -62,11 +59,7 @@ describe("IncompatibleController", () => {
         describe("when incompatibleValue is set to a function", () => {
             it("returns result from incompatibleValue function", () => {
                 const incompatibleValueFn = jest.fn().mockReturnValue(false);
-                const controller = new IncompatibleController(
-                    "feature_spotlight" as FeatureSettingKey,
-                    { key: null },
-                    incompatibleValueFn,
-                );
+                const controller = new IncompatibleController("test_setting", { key: null }, incompatibleValueFn);
                 settingsGetValueSpy.mockReturnValue("test");
                 expect(controller.incompatibleSetting).toBe(false);
                 expect(incompatibleValueFn).toHaveBeenCalledWith("test");
@@ -77,7 +70,7 @@ describe("IncompatibleController", () => {
     describe("getValueOverride()", () => {
         it("returns forced value when setting is incompatible", () => {
             settingsGetValueSpy.mockReturnValue(true);
-            const controller = new IncompatibleController("feature_spotlight" as FeatureSettingKey, { key: null });
+            const controller = new IncompatibleController("test_setting", { key: null });
             expect(
                 controller.getValueOverride(SettingLevel.ACCOUNT, "$room:server", true, SettingLevel.ACCOUNT),
             ).toEqual({ key: null });
@@ -85,7 +78,7 @@ describe("IncompatibleController", () => {
 
         it("returns null when setting is not incompatible", () => {
             settingsGetValueSpy.mockReturnValue(false);
-            const controller = new IncompatibleController("feature_spotlight" as FeatureSettingKey, { key: null });
+            const controller = new IncompatibleController("test_setting", { key: null });
             expect(
                 controller.getValueOverride(SettingLevel.ACCOUNT, "$room:server", true, SettingLevel.ACCOUNT),
             ).toEqual(null);

apps/web/tsconfig.json

@@ -23,7 +23,8 @@
             "test-utils": ["./test/test-utils"],
             "test-utils/*": ["./test/test-utils/*"],
             "jest-mock-vitest-adapter": ["./test/setup/adapter.ts"]
-        }
+        },
+        "skipLibCheck": true
     },
     "include": [
         "./node_modules/matrix-js-sdk/src/@types/*.d.ts",

knip.ts

@@ -113,6 +113,8 @@ export default {
     ignoreDependencies: [
         // Used by multiple packages, raises a false positive for some reason
         "events",
+        // Used as a workaround for api-extractor not supporting typescript 7.0
+        "@typescript/old",
     ],
     ignoreExportsUsedInFile: true,
     ignoreBinaries: [

package.json

@@ -35,6 +35,7 @@
         "@nx-tools/nx-container": "^7.2.1",
         "@playwright/test": "catalog:",
         "@types/node": "25",
+        "@typescript/native": "catalog:",
         "@vitest/coverage-v8": "catalog:",
         "cronstrue": "^3.0.0",
         "eslint-plugin-element-call": "github:element-hq/element-call#livekit&path:/eslint",
@@ -49,7 +50,7 @@
         "oxfmt": "0.56.0",
         "oxlint": "^1.70.0",
         "oxlint-tsgolint": "^0.23.0",
-        "typescript": "catalog:",
+        "typescript": "catalog:ts6",
         "vitepress": "^1.6.4",
         "vitepress-plugin-mermaid": "^2.0.17",
         "vitest": "catalog:",

packages/module-api/package.json

@@ -39,15 +39,16 @@
     "devDependencies": {
         "@matrix-org/react-sdk-module-api": "^2.5.0",
         "@microsoft/api-extractor": "^7.49.1",
-        "@types/node": "catalog:",
+        "@types/node": "catalog:ts6",
         "@types/react": "catalog:",
         "@types/react-dom": "catalog:",
         "@types/semver": "^7.5.8",
+        "@typescript/native": "catalog:",
         "matrix-widget-api": "^1.17.0",
         "rollup-plugin-external-globals": "^0.13.0",
         "semver": "^7.6.3",
         "shared-types": "workspace:*",
-        "typescript": "catalog:",
+        "typescript": "catalog:ts6",
         "unplugin-dts": "catalog:",
         "vite": "catalog:",
         "vitest": "catalog:"

packages/module-api/vite.config.ts

@@ -30,6 +30,10 @@ export default defineConfig({
         dts({
             bundleTypes: {
                 configPath: "./api-extractor.json",
+                invokeOptions: {
+                    localBuild: !!process.env.CI,
+                    typescriptCompilerFolder: resolve(require.resolve("@typescript/old"), "../.."),
+                },
             },
         }),
         externalGlobals({

packages/shared-components/package.json

@@ -104,6 +104,7 @@
         "@types/lodash": "^4.17.20",
         "@types/react": "catalog:",
         "@types/react-dom": "catalog:",
+        "@typescript/native": "catalog:",
         "@vector-im/compound-web": "catalog:",
         "@vitejs/plugin-react": "catalog:",
         "@vitest/browser-playwright": "catalog:",
@@ -113,7 +114,7 @@
         "typedoc": "^0.28.16",
         "typedoc-plugin-markdown": "^4.9.0",
         "typedoc-plugin-missing-exports": "^4.1.2",
-        "typescript": "catalog:",
+        "typescript": "catalog:ts6",
         "unplugin-dts": "catalog:",
         "vite": "catalog:",
         "vite-plugin-node-polyfills": "^0.28.0",

packages/shared-components/tsconfig.node.json

@@ -7,7 +7,8 @@
         "esModuleInterop": true,
         "strict": true,
         "types": [],
-        "allowSyntheticDefaultImports": true
+        "allowSyntheticDefaultImports": true,
+        "skipLibCheck": true
     },
     "include": ["vite.config.ts", "vitest.config.ts", "../../vitest.config.ts"]
 }

packages/shared-components/vite.config.ts

@@ -96,7 +96,12 @@ export default defineConfig({
         react(),
         layerCssAssets(),
         dts({
-            bundleTypes: true,
+            bundleTypes: {
+                invokeOptions: {
+                    localBuild: !!process.env.CI,
+                    typescriptCompilerFolder: resolve(require.resolve("@typescript/old"), "../.."),
+                },
+            },
             include: ["src/**/*.{ts,tsx}"],
             exclude: ["src/**/*.test.{ts,tsx}", "src/**/*.stories.{ts,tsx}"],
             copyDtsFiles: false,

pnpm-workspace.yaml

@@ -12,8 +12,9 @@ packages:
 
 catalog:
     # typescript
-    typescript: 6.0.3
-    "@types/node": ts6.0
+    "typescript": 7.0.2
+    "@typescript/native": npm:typescript@7.0.2
+    "@types/node": ts7.0
     # react
     react: ^19.0.0
     react-dom: ^19.0.0
@@ -40,6 +41,11 @@ catalog:
     "@vitejs/plugin-react": 6.0.2
     unplugin-dts: 1.0.1
 
+catalogs:
+    ts6:
+        typescript: npm:@typescript/typescript6@6.0.2
+        "@types/node": ts6.0
+
 packageExtensions:
     fdir:
         dependencies:
@@ -147,11 +153,18 @@ overrides:
     vite@6 <6.4.3: ^6.4.3
     # Workaround for https://github.com/electron/electron/issues/51619
     yauzl: "^3.3.1"
-    # Convince api-extractor to use an up to date Typescript version
-    typescript: "catalog:"
+    # Convince api-extractor to use a newer Typescript version
+    "unplugin-dts>typescript": "catalog:ts6"
+    "@microsoft/api-extractor>typescript": "catalog:ts6"
+    # Hold some things back from ts7
+    "@arcmantle/vite-plugin-import-css-sheet>typescript": "catalog:ts6"
+    "react-docgen-typescript>typescript": "catalog:ts6"
 
 minimumReleaseAgeExclude:
     - "matrix-js-sdk"
     - "@matrix-org/*"
     - "@vector-im/*"
     - "@element-hq/*"
+    # Temporary for testing purposes
+    - "@typescript/*"
+    - typescript@7.0.2