diff --git a/superset-frontend/spec/javascripts/dashboard/util/getFormDataWithExtraFilters_spec.js b/superset-frontend/spec/javascripts/dashboard/util/getFormDataWithExtraFilters_spec.ts
similarity index 98%
rename from superset-frontend/spec/javascripts/dashboard/util/getFormDataWithExtraFilters_spec.js
rename to superset-frontend/spec/javascripts/dashboard/util/getFormDataWithExtraFilters_spec.ts
index 104b3237548..d45386b3ee6 100644
--- a/superset-frontend/spec/javascripts/dashboard/util/getFormDataWithExtraFilters_spec.js
+++ b/superset-frontend/spec/javascripts/dashboard/util/getFormDataWithExtraFilters_spec.ts
@@ -19,7 +19,7 @@
 import getFormDataWithExtraFilters from 'src/dashboard/util/charts/getFormDataWithExtraFilters';
 
 describe('getFormDataWithExtraFilters', () => {
-  const chartId = 'chartId';
+  const chartId = 8675309;
   const mockArgs = {
     chart: {
       id: chartId,
diff --git a/superset-frontend/src/dashboard/types.ts b/superset-frontend/src/dashboard/types.ts
new file mode 100644
index 00000000000..4b6a8091c8c
--- /dev/null
+++ b/superset-frontend/src/dashboard/types.ts
@@ -0,0 +1,30 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ChartProps } from '@superset-ui/chart';
+import { chart } from 'src/chart/chartReducer';
+
+export type ChartReducerInitialState = typeof chart;
+
+// chart query built from initialState
+// Ref: https://github.com/apache/incubator-superset/blob/dcac860f3e5528ecbc39e58f045c7388adb5c3d0/superset-frontend/src/dashboard/reducers/getInitialState.js#L120
+export interface ChartQueryPayload extends Partial<ChartReducerInitialState> {
+  formData: ChartProps['formData'];
+  form_data?: ChartProps['rawFormData'];
+  [key: string]: unknown;
+}
diff --git a/superset-frontend/src/dashboard/util/charts/getEffectiveExtraFilters.js b/superset-frontend/src/dashboard/util/charts/getEffectiveExtraFilters.ts
similarity index 87%
rename from superset-frontend/src/dashboard/util/charts/getEffectiveExtraFilters.js
rename to superset-frontend/src/dashboard/util/charts/getEffectiveExtraFilters.ts
index b7a768b0af6..5375af296d4 100644
--- a/superset-frontend/src/dashboard/util/charts/getEffectiveExtraFilters.js
+++ b/superset-frontend/src/dashboard/util/charts/getEffectiveExtraFilters.ts
@@ -16,7 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export default function getEffectiveExtraFilters(filters) {
+import { DataRecordFilters } from '@superset-ui/chart';
+
+export default function getEffectiveExtraFilters(filters: DataRecordFilters) {
   return Object.entries(filters).map(([column, values]) => ({
     col: column,
     op: 'in',
diff --git a/superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.js b/superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.ts
similarity index 87%
rename from superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.js
rename to superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.ts
index 35669317e88..5eb60750a8b 100644
--- a/superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.js
+++ b/superset-frontend/src/dashboard/util/charts/getFormDataWithExtraFilters.ts
@@ -18,6 +18,8 @@
  */
 import { isEqual } from 'lodash';
 import { CategoricalColorNamespace } from '@superset-ui/color';
+import { DataRecordFilters } from '@superset-ui/chart';
+import { ChartQueryPayload } from 'src/dashboard/types';
 import getEffectiveExtraFilters from './getEffectiveExtraFilters';
 
 // We cache formData objects so that our connected container components don't always trigger
@@ -25,16 +27,24 @@ import getEffectiveExtraFilters from './getEffectiveExtraFilters';
 const cachedFiltersByChart = {};
 const cachedFormdataByChart = {};
 
+interface GetFormDataWithExtraFiltersArguments {
+  chart: ChartQueryPayload;
+  filters: DataRecordFilters;
+  colorScheme?: string;
+  colorNamespace?: string;
+  sliceId: number;
+}
+
 // this function merge chart's formData with dashboard filters value,
 // and generate a new formData which will be used in the new query.
 // filters param only contains those applicable to this chart.
 export default function getFormDataWithExtraFilters({
-  chart = {},
+  chart,
   filters,
   colorScheme,
   colorNamespace,
   sliceId,
-}) {
+}: GetFormDataWithExtraFiltersArguments) {
   // Propagate color mapping to chart
   const scale = CategoricalColorNamespace.getScale(colorScheme, colorNamespace);
   const labelColors = scale.getColorMap();