chore(frontend): migrate 13 JS/JSX files to TypeScript (#36720)

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

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

@@ -16,22 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import PropTypes from 'prop-types';
 import { ColumnTypeLabel } from '@superset-ui/chart-controls';
+import { AggregateOption as AggregateOptionType } from './types';
 
-import aggregateOptionType from './aggregateOptionType';
+interface AggregateOptionProps {
+  aggregate: AggregateOptionType;
+  showType?: boolean;
+}
 
-const propTypes = {
-  aggregate: aggregateOptionType,
-  showType: PropTypes.bool,
-};
-
-export default function AggregateOption({ aggregate, showType }) {
+export default function AggregateOption({
+  aggregate,
+  showType,
+}: AggregateOptionProps) {
   return (
     <div>
-      {showType && <ColumnTypeLabel type="aggregate" />}
+      {showType && <ColumnTypeLabel type={'aggregate' as any} />}
       <span className="option-label">{aggregate.aggregate_name}</span>
     </div>
   );
 }
-AggregateOption.propTypes = propTypes;

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

@@ -16,35 +16,40 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import PropTypes from 'prop-types';
 import {
   StyledColumnOption,
   StyledMetricOption,
 } from 'src/explore/components/optionRenderers';
 import withToasts from 'src/components/MessageToasts/withToasts';
 import AggregateOption from './AggregateOption';
-import columnType from './columnType';
-import aggregateOptionType from './aggregateOptionType';
-import savedMetricType from './savedMetricType';
 
-const propTypes = {
-  option: PropTypes.oneOfType([
-    columnType,
-    savedMetricType,
-    aggregateOptionType,
-  ]).isRequired,
-  addWarningToast: PropTypes.func.isRequired,
-};
+interface MetricDefinitionOptionProps {
+  option: {
+    metric_name?: string;
+    column_name?: string;
+    aggregate_name?: string;
+    [key: string]: unknown;
+  };
+  addWarningToast: (message: string) => void;
+}
 
-function MetricDefinitionOption({ option, addWarningToast }) {
+function MetricDefinitionOption({
+  option,
+  addWarningToast,
+}: MetricDefinitionOptionProps) {
   if (option.metric_name) {
-    return <StyledMetricOption metric={option} showType />;
+    return <StyledMetricOption metric={option as any} showType />;
   }
   if (option.column_name) {
-    return <StyledColumnOption column={option} showType />;
+    return <StyledColumnOption column={option as any} showType />;
   }
   if (option.aggregate_name) {
-    return <AggregateOption aggregate={option} showType />;
+    return (
+      <AggregateOption
+        aggregate={{ aggregate_name: option.aggregate_name }}
+        showType
+      />
+    );
   }
   addWarningToast(
     'You must supply either a saved metric, column or aggregate to MetricDefinitionOption',
@@ -52,6 +57,4 @@ function MetricDefinitionOption({ option, addWarningToast }) {
   return null;
 }
 
-MetricDefinitionOption.propTypes = propTypes;
-
 export default withToasts(MetricDefinitionOption);