chore(frontend): TypeScript 6.0 readiness — declaration emit fixes (Phase A) (#39530)

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

superset-frontend/packages/superset-core/src/theme/Theme.tsx

@@ -38,9 +38,12 @@ import {
 import { normalizeThemeConfig, serializeThemeConfig } from './utils';
 
 export class Theme {
-  theme: SupersetTheme;
+  // Assigned via setConfig() in the constructor; TypeScript 6.0's
+  // strictPropertyInitialization can't trace that call chain, so we use
+  // a definite-assignment assertion.
+  theme!: SupersetTheme;
 
-  private antdConfig: AntdThemeConfig;
+  private antdConfig!: AntdThemeConfig;
 
   private constructor({ config }: { config?: AnyThemeConfig }) {
     this.SupersetThemeProvider = this.SupersetThemeProvider.bind(this);

superset-frontend/packages/superset-core/types/external.d.ts

@@ -20,3 +20,10 @@
  * Stub for the untyped jed module.
  */
 declare module 'jed';
+
+/**
+ * CSS side-effect imports from @fontsource packages. These are bundler-only
+ * artifacts and carry no type information at runtime; declaring them here
+ * silences TS2882 under TypeScript 6.0's stricter module-resolution rules.
+ */
+declare module '@fontsource/*';

superset-frontend/src/SqlLab/actions/sqlLab.ts

@@ -856,7 +856,7 @@ export function loadQueryEditor(queryEditor: QueryEditor): SqlLabAction {
   return { type: LOAD_QUERY_EDITOR, queryEditor };
 }
 
-interface TableSchema {
+export interface TableSchema {
   description: {
     columns: unknown[];
     selectStar: string;
@@ -1284,7 +1284,7 @@ export function addTable(
   };
 }
 
-interface NewTable {
+export interface NewTable {
   id?: string;
   dbId: number | string;
   catalog?: string | null;
@@ -1346,7 +1346,7 @@ export function runTablePreviewQuery(
   };
 }
 
-interface TableMetaData {
+export interface TableMetaData {
   columns?: unknown[];
   selectStar?: string;
   primaryKey?: unknown;
@@ -1660,7 +1660,7 @@ export function createDatasourceFailed(err: string): SqlLabAction {
   return { type: CREATE_DATASOURCE_FAILED, err };
 }
 
-interface VizOptions {
+export interface VizOptions {
   dbId: number;
   catalog?: string | null;
   schema: string;

superset-frontend/src/dashboard/components/Dashboard.tsx

@@ -67,7 +67,7 @@ interface DashboardActions {
   setDatasources: (datasources: unknown) => void;
 }
 
-interface DashboardProps {
+export interface DashboardProps {
   actions: DashboardActions;
   dashboardId: number;
   editMode?: boolean;

superset-frontend/src/dashboard/components/DashboardGrid.tsx

@@ -32,7 +32,7 @@ import { Droppable } from './dnd/DragDroppable';
 import { GRID_GUTTER_SIZE, GRID_COLUMN_COUNT } from '../util/constants';
 import { TAB_TYPE } from '../util/componentTypes';
 
-interface DashboardGridProps {
+export interface DashboardGridProps {
   depth: number;
   editMode?: boolean;
   canEdit?: boolean;

superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.tsx

@@ -80,7 +80,7 @@ interface FilterScopeMap {
   [key: string]: FilterScopeMapEntry;
 }
 
-interface FilterScopeSelectorProps {
+export interface FilterScopeSelectorProps {
   dashboardFilters: Record<number, DashboardFilter>;
   layout: DashboardLayout;
   updateDashboardFiltersScope: (

superset-frontend/src/dashboard/components/gridComponents/ChartHolder/ChartHolder.tsx

@@ -43,7 +43,7 @@ import {
 
 export const CHART_MARGIN = 32;
 
-interface ChartHolderProps {
+export interface ChartHolderProps {
   id: string;
   parentId: string;
   dashboardId: number;

superset-frontend/src/dashboard/components/gridComponents/Column/Column.tsx

@@ -39,7 +39,7 @@ import backgroundStyleOptions from 'src/dashboard/util/backgroundStyleOptions';
 import { BACKGROUND_TRANSPARENT } from 'src/dashboard/util/constants';
 import { EMPTY_CONTAINER_Z_INDEX } from 'src/dashboard/constants';
 
-interface ColumnProps {
+export interface ColumnProps {
   id: string;
   parentId: string;
   component: LayoutItem;

superset-frontend/src/dashboard/components/gridComponents/Markdown/Markdown.tsx

@@ -43,13 +43,13 @@ import {
   GRID_BASE_UNIT,
 } from 'src/dashboard/util/constants';
 
-interface EditorInstance {
+export interface EditorInstance {
   resize?: (force: boolean) => void;
   getSession?: () => { setUseWrapMode: (wrap: boolean) => void };
   focus?: () => void;
 }
 
-interface MarkdownOwnProps {
+export interface MarkdownOwnProps {
   id: string;
   parentId: string;
   component: LayoutItem;
@@ -71,7 +71,7 @@ interface MarkdownOwnProps {
   updateComponents: (components: Record<string, LayoutItem>) => void;
 }
 
-interface MarkdownStateProps {
+export interface MarkdownStateProps {
   logEvent: (eventName: string, eventData: JsonObject) => void;
   addDangerToast: (msg: string) => void;
   undoLength: number;
@@ -80,9 +80,9 @@ interface MarkdownStateProps {
   htmlSchemaOverrides?: JsonObject;
 }
 
-type MarkdownProps = MarkdownOwnProps & MarkdownStateProps;
+export type MarkdownProps = MarkdownOwnProps & MarkdownStateProps;
 
-interface MarkdownState {
+export interface MarkdownState {
   isFocused: boolean;
   markdownSource: string;
   editor: EditorInstance | null;

superset-frontend/src/dashboard/components/gridComponents/Tab/Tab.tsx

@@ -57,7 +57,7 @@ export const RENDER_TAB_CONTENT = 'RENDER_TAB_CONTENT';
 // Delay before refreshing charts to ensure they are fully mounted
 const CHART_MOUNT_DELAY = 100;
 
-interface TabProps {
+export interface TabProps {
   dashboardId: number;
   id: string;
   parentId: string;

superset-frontend/src/dashboard/components/gridComponents/Tabs/Tabs.tsx

@@ -44,7 +44,7 @@ import TabsRenderer from '../TabsRenderer';
 import type { LayoutItem, RootState } from 'src/dashboard/types';
 import type { DropResult } from 'src/dashboard/components/dnd/dragDroppableConfig';
 
-interface TabsProps {
+export interface TabsProps {
   id: string;
   parentId: string;
   component: LayoutItem;

superset-frontend/src/dashboard/reducers/dashboardFilters.ts

@@ -30,7 +30,7 @@ import { buildActiveFilters } from '../util/activeDashboardFilters';
 import { getChartIdAndColumnFromFilterKey } from '../util/getDashboardFilterKey';
 import { LayoutItem } from '../types';
 
-interface FilterScope {
+export interface FilterScope {
   scope: string[];
   immune: number[];
 }

superset-frontend/src/dashboard/reducers/dashboardInfo.ts

@@ -57,7 +57,7 @@ interface DashboardInfoAction {
   [key: string]: unknown;
 }
 
-interface HydrateDashboardAction {
+export interface HydrateDashboardInfoAction {
   type: typeof HYDRATE_DASHBOARD;
   data: {
     dashboardInfo: DashboardInfo;
@@ -65,7 +65,9 @@ interface HydrateDashboardAction {
   };
 }
 
-type DashboardInfoReducerAction = DashboardInfoAction | HydrateDashboardAction;
+type DashboardInfoReducerAction =
+  | DashboardInfoAction
+  | HydrateDashboardInfoAction;
 
 type DashboardInfoState = Partial<DashboardInfo> & {
   last_modified_time?: number;
@@ -74,7 +76,7 @@ type DashboardInfoState = Partial<DashboardInfo> & {
 
 function isHydrateAction(
   action: DashboardInfoReducerAction,
-): action is HydrateDashboardAction {
+): action is HydrateDashboardInfoAction {
   return action.type === HYDRATE_DASHBOARD;
 }
 

superset-frontend/src/dataMask/reducer.ts

@@ -66,7 +66,7 @@ interface DashboardMetadata {
   chart_customization_config?: ChartCustomization[];
 }
 
-interface HydrateDashboardAction {
+export interface HydrateDataMaskAction {
   type: typeof HYDRATE_DASHBOARD;
   data: {
     dashboardInfo: {
@@ -199,7 +199,7 @@ function updateDataMaskForFilterChanges(
 const dataMaskReducer = produce(
   (
     draft: DataMaskStateWithId,
-    action: AnyDataMaskAction | HydrateDashboardAction | HydrateExplore,
+    action: AnyDataMaskAction | HydrateDataMaskAction | HydrateExplore,
   ) => {
     const cleanState: DataMaskStateWithId = {};
     switch (action.type) {
@@ -213,7 +213,7 @@ const dataMaskReducer = produce(
         };
         return draft;
       case HYDRATE_DASHBOARD: {
-        const hydrateDashboardAction = action as HydrateDashboardAction;
+        const hydrateDashboardAction = action as HydrateDataMaskAction;
         const metadata = hydrateDashboardAction.data.dashboardInfo?.metadata;
         const loadedDataMask = hydrateDashboardAction.data.dataMask;
 

superset-frontend/src/explore/components/controls/CollectionControl/index.tsx

@@ -50,7 +50,7 @@ interface CollectionItem {
   [key: string]: unknown;
 }
 
-interface CollectionControlProps {
+export interface CollectionControlProps {
   name: string;
   label?: string | null;
   description?: string | null;

superset-frontend/src/explore/components/controls/DatasourceControl/index.tsx

@@ -94,7 +94,7 @@ interface FormData {
   [key: string]: unknown;
 }
 
-interface DatasourceControlProps {
+export interface DatasourceControlProps {
   actions: DatasourceControlActions;
   onChange?: () => void;
   value?: string | null;

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.tsx

@@ -69,7 +69,7 @@ interface Datasource {
   [key: string]: unknown;
 }
 
-interface AdhocFilterControlProps {
+export interface AdhocFilterControlProps {
   label?: ReactNode;
   name?: string;
   sections?: string[];

superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.tsx

@@ -108,7 +108,7 @@ const getMetricsMatchingCurrentDataset = (
     );
   });
 
-interface MetricsControlProps {
+export interface MetricsControlProps {
   name: string;
   onChange: (value: unknown) => void;
   multi?: boolean;

superset-frontend/src/features/databases/DatabaseModal/styles.ts

@@ -293,10 +293,17 @@ export const StyledInputContainer = styled.div`
   `}
 `;
 
+// Named-reference type annotation: TypeScript 6.0 declaration emit (TS2883)
+// won't let us leak react-ace's IAceOptions/ICommand/IEditorProps/IMarker
+// through the inferred type because they live in @superset-ui/core's nested
+// node_modules and aren't portable. Aliasing to `typeof JsonEditor` emits a
+// named reference in the .d.ts instead of the expanded structural type.
+// The styled-components and ForwardRefExoticComponent shapes don't overlap
+// structurally, so we bounce through `unknown` to widen the cast.
 export const StyledJsonEditor = styled(JsonEditor)`
   flex: 1 1 auto;
   /* Border is already applied by AceEditor itself */
-`;
+` as unknown as typeof JsonEditor;
 
 export const StyledExpandableForm = styled.div`
   padding-top: ${({ theme }) => theme.sizeUnit}px;

superset-frontend/src/features/reports/ReportModal/styles.tsx

@@ -67,10 +67,13 @@ export const StyledScheduleTitle = styled.div`
   }
 `;
 
+// Named-reference type annotation: TypeScript 6.0 declaration emit (TS2883)
+// can't name CronProps from react-js-cron via its nested node_modules path.
+// Aliasing to `typeof CronPicker` emits a named reference in the .d.ts.
 export const StyledCronPicker = styled(CronPicker)`
   margin-bottom: ${({ theme }) => theme.sizeUnit * 3}px;
   width: ${({ theme }) => theme.sizeUnit * 120}px;
-`;
+` as typeof CronPicker;
 
 export const StyledCronError = styled.p`
   color: ${({ theme }) => theme.colorError};