Chore: some more type fixes (#73606)

* some type fixes

* some select/table fixes

* some uplot type improvements

* couple more

.betterer.results

@@ -7,8 +7,7 @@ exports[`better eslint`] = {
   value: `{
     "packages/grafana-data/src/dataframe/ArrayDataFrame.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
     "packages/grafana-data/src/dataframe/CircularDataFrame.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -792,12 +791,6 @@ exports[`better eslint`] = {
     "packages/grafana-runtime/src/analytics/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "packages/grafana-runtime/src/components/PanelRenderer.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
-    ],
     "packages/grafana-runtime/src/config.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -844,9 +837,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "17"]
     ],
     "packages/grafana-runtime/src/services/live.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "packages/grafana-runtime/src/utils/DataSourceWithBackend.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -887,17 +878,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
-    "packages/grafana-ui/src/components/Card/Card.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
-    "packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
     "packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
@@ -960,9 +943,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "packages/grafana-ui/src/components/Graph/Graph.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "packages/grafana-ui/src/components/Graph/GraphContextMenu.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
@@ -1085,13 +1065,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
-    "packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "packages/grafana-ui/src/components/Select/Select.story.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
     "packages/grafana-ui/src/components/Select/SelectBase.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -1107,17 +1080,11 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "11"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "12"]
     ],
-    "packages/grafana-ui/src/components/Select/SelectMenu.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
-    "packages/grafana-ui/src/components/Select/SingleValue.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "packages/grafana-ui/src/components/Select/ValueContainer.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
@@ -1174,12 +1141,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
-    "packages/grafana-ui/src/components/Table/CellActions.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "packages/grafana-ui/src/components/Table/DefaultCell.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "packages/grafana-ui/src/components/Table/ExpandedRow.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
@@ -1197,15 +1158,11 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/Table/HeaderRow.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "packages/grafana-ui/src/components/Table/JSONViewCell.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "packages/grafana-ui/src/components/Table/Table.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
-      [0, 0, 0, "Do not use any type assertions.", "4"]
+      [0, 0, 0, "Do not use any type assertions.", "3"]
     ],
     "packages/grafana-ui/src/components/Table/TableCell.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
@@ -1218,17 +1175,9 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/Table/TableCellInspectModal.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "packages/grafana-ui/src/components/Table/hooks.ts:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
-      [0, 0, 0, "Do not use any type assertions.", "4"]
-    ],
     "packages/grafana-ui/src/components/Table/reducer.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
     "packages/grafana-ui/src/components/Table/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -1241,16 +1190,14 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
-      [0, 0, 0, "Do not use any type assertions.", "6"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "8"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "9"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "10"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "11"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "12"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "13"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "14"],
-      [0, 0, 0, "Do not use any type assertions.", "15"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "13"]
     ],
     "packages/grafana-ui/src/components/Tags/Tag.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
@@ -1294,18 +1241,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "packages/grafana-ui/src/components/uPlot/PlotLegend.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"]
-    ],
-    "packages/grafana-ui/src/components/uPlot/config.ts:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
-      [0, 0, 0, "Do not use any type assertions.", "4"],
-      [0, 0, 0, "Do not use any type assertions.", "5"],
-      [0, 0, 0, "Do not use any type assertions.", "6"],
-      [0, 0, 0, "Do not use any type assertions.", "7"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -1316,18 +1252,7 @@ exports[`better eslint`] = {
     ],
     "packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "4"]
-    ],
-    "packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "packages/grafana-ui/src/components/uPlot/config/gradientFills.ts:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"]
+      [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "packages/grafana-ui/src/components/uPlot/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -1336,9 +1261,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
-      [0, 0, 0, "Do not use any type assertions.", "4"],
-      [0, 0, 0, "Do not use any type assertions.", "5"]
+      [0, 0, 0, "Do not use any type assertions.", "3"]
     ],
     "packages/grafana-ui/src/options/builder/axis.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
@@ -1357,9 +1280,7 @@ exports[`better eslint`] = {
     ],
     "packages/grafana-ui/src/slate-plugins/slate-prism/index.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
+      [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "packages/grafana-ui/src/slate-plugins/slate-prism/options.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -1373,9 +1294,7 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/themes/ThemeContext.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
-      [0, 0, 0, "Do not use any type assertions.", "4"]
+      [0, 0, 0, "Do not use any type assertions.", "2"]
     ],
     "packages/grafana-ui/src/themes/stylesFactory.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -1419,15 +1338,11 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "packages/grafana-ui/src/utils/table.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "packages/grafana-ui/src/utils/useAsyncDependency.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "plugins-bundled/internal/input-datasource/src/InputDatasource.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "public/app/core/TableModel.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],

packages/grafana-data/src/dataframe/ArrayDataFrame.ts

@@ -16,7 +16,7 @@ export class ArrayDataFrame<T = any> implements DataFrame {
   meta?: QueryResultMeta;
 
   constructor(source: T[], names?: string[]) {
-    return arrayToDataFrame(source, names) as ArrayDataFrame<T>; // returns a standard DataFrame
+    return arrayToDataFrame(source, names); // returns a standard DataFrame
   }
 }
 

packages/grafana-runtime/src/components/PanelRenderer.tsx

@@ -10,7 +10,7 @@ import { AbsoluteTimeRange, FieldConfigSource, PanelData } from '@grafana/data';
  *
  * @internal
  */
-export interface PanelRendererProps<P extends object = any, F extends object = any> {
+export interface PanelRendererProps<P extends object = {}, F extends object = {}> {
   data?: PanelData;
   pluginId: string;
   title: string;
@@ -29,7 +29,7 @@ export interface PanelRendererProps<P extends object = any, F extends object = a
  *
  * @internal
  */
-export type PanelRendererType<P extends object = any, F extends object = any> = React.ComponentType<
+export type PanelRendererType<P extends object = {}, F extends object = {}> = React.ComponentType<
   PanelRendererProps<P, F>
 >;
 

packages/grafana-runtime/src/services/live.ts

@@ -36,7 +36,7 @@ export interface LiveDataStreamOptions {
  */
 export interface LiveQueryDataOptions {
   request: DataQueryRequest;
-  body: any; // processed queries, same as sent to `/api/query/ds`
+  body: unknown; // processed queries, same as sent to `/api/query/ds`
 }
 
 /**
@@ -79,7 +79,7 @@ export interface GrafanaLiveSrv {
    *
    * @alpha -- experimental
    */
-  publish(address: LiveChannelAddress, data: any): Promise<any>;
+  publish(address: LiveChannelAddress, data: unknown): Promise<any>;
 }
 
 let singletonInstance: GrafanaLiveSrv;

packages/grafana-ui/src/components/Card/Card.tsx

@@ -49,10 +49,7 @@ const CardContext = React.createContext<{
  */
 export const Card: CardInterface = ({ disabled, href, onClick, children, isSelected, className, ...htmlProps }) => {
   const hasHeadingComponent = useMemo(
-    () =>
-      React.Children.toArray(children).some(
-        (c) => React.isValidElement(c) && (c.type as any).displayName === Heading.displayName
-      ),
+    () => React.Children.toArray(children).some((c) => React.isValidElement(c) && c.type === Heading),
     [children]
   );
 

packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx

@@ -47,10 +47,10 @@ export class ClickOutsideWrapper extends PureComponent<React.PropsWithChildren<P
     }
   }
 
-  onOutsideClick = (event: any) => {
+  onOutsideClick: EventListener = (event) => {
     const domNode = this.myRef.current;
 
-    if (!domNode || !domNode.contains(event.target)) {
+    if (!domNode || (event.target instanceof Node && !domNode.contains(event.target))) {
       this.props.onClick();
     }
   };

packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx

@@ -58,10 +58,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
                 )}
 
                 {children ? (
-                  // Children have a bit weird type due to intersection used in the definition so we need to cast here,
-                  // but the definition is correct and should not allow to pass a children that does not conform to
-                  // ColorPickerTriggerRenderer type.
-                  (children as ColorPickerTriggerRenderer)({
+                  children({
                     ref: this.pickerTriggerRef,
                     showColorPicker: showPopper,
                     hideColorPicker: hidePopper,

packages/grafana-ui/src/components/Graph/Graph.tsx

@@ -62,7 +62,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
   };
 
   element: HTMLElement | null = null;
-  $element: any;
+  $element: JQuery<HTMLElement> | null = null;
 
   componentDidUpdate(prevProps: GraphProps, prevState: GraphState) {
     if (prevProps !== this.props) {
@@ -86,14 +86,14 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
     }
   }
 
-  onPlotSelected = (event: JQueryEventObject, ranges: { xaxis: { from: number; to: number } }) => {
+  onPlotSelected = (event: JQuery.Event, ranges: { xaxis: { from: number; to: number } }) => {
     const { onHorizontalRegionSelected } = this.props;
     if (onHorizontalRegionSelected) {
       onHorizontalRegionSelected(ranges.xaxis.from, ranges.xaxis.to);
     }
   };
 
-  onPlotHover = (event: JQueryEventObject, pos: FlotPosition, item?: FlotItem<GraphSeriesXY>) => {
+  onPlotHover = (event: JQuery.Event, pos: FlotPosition, item?: FlotItem<GraphSeriesXY>) => {
     this.setState({
       isTooltipVisible: true,
       activeItem: item,
@@ -101,7 +101,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
     });
   };
 
-  onPlotClick = (event: JQueryEventObject, contextPos: FlotPosition, item?: FlotItem<GraphSeriesXY>) => {
+  onPlotClick = (event: JQuery.Event, contextPos: FlotPosition, item?: FlotItem<GraphSeriesXY>) => {
     this.setState({
       isContextVisible: true,
       isTooltipVisible: false,

packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { useTheme2 } from '../../themes/ThemeContext';
 import { getInputStyles } from '../Input/Input';
 
-export const IndicatorsContainer = React.forwardRef<HTMLDivElement, React.PropsWithChildren<any>>((props, ref) => {
+export const IndicatorsContainer = React.forwardRef<HTMLDivElement, React.PropsWithChildren>((props, ref) => {
   const { children } = props;
   const theme = useTheme2();
   const styles = getInputStyles({ theme, invalid: false });

packages/grafana-ui/src/components/Select/Select.story.tsx

@@ -192,7 +192,7 @@ export const MultiPlainValue: Story = (args) => {
         options={generateOptions()}
         value={value}
         onChange={(v) => {
-          setValue(v.map((v: any) => v.value));
+          setValue(v.map((v) => v.value!));
         }}
         prefix={getPrefix(args.icon)}
         {...args}
@@ -213,7 +213,7 @@ export const MultiSelectWithOptionGroups: Story = (args) => {
         ]}
         value={value}
         onChange={(v) => {
-          setValue(v.map((v: any) => v.value));
+          setValue(v.map((v) => v.value!));
           action('onChange')(v);
         }}
         prefix={getPrefix(args.icon)}

packages/grafana-ui/src/components/Select/SelectMenu.tsx

@@ -95,7 +95,7 @@ export const SelectMenuOptions = ({
   isFocused,
   isSelected,
   renderOptionLabel,
-}: React.PropsWithChildren<SelectMenuOptionProps<any>>) => {
+}: React.PropsWithChildren<SelectMenuOptionProps<unknown>>) => {
   const theme = useTheme2();
   const styles = getSelectStyles(theme);
   const icon = data.icon ? toIconName(data.icon) : undefined;
@@ -118,7 +118,7 @@ export const SelectMenuOptions = ({
       title={data.title}
     >
       {icon && <Icon name={icon} className={styles.optionIcon} />}
-      {data.imgUrl && <img className={styles.optionImage} src={data.imgUrl} alt={data.label || data.value} />}
+      {data.imgUrl && <img className={styles.optionImage} src={data.imgUrl} alt={data.label || String(data.value)} />}
       <div className={styles.optionBody}>
         <span>{renderOptionLabel ? renderOptionLabel(data) : children}</span>
         {data.description && <div className={styles.optionDescription}>{data.description}</div>}

packages/grafana-ui/src/components/Select/SingleValue.tsx

@@ -65,12 +65,7 @@ export const SingleValue = <T extends unknown>(props: Props<T>) => {
       className={cx(styles.singleValue, isDisabled && styles.disabled, props.selectProps.menuIsOpen && styles.isOpen)}
     >
       {data.imgUrl ? (
-        <FadeWithImage
-          loading={loading}
-          imgUrl={data.imgUrl}
-          styles={styles}
-          alt={(data.label ?? data.value) as string}
-        />
+        <FadeWithImage loading={loading} imgUrl={data.imgUrl} styles={styles} alt={String(data.label ?? data.value)} />
       ) : (
         <>
           <SlideOutTransition horizontal size={16} visible={loading} duration={150}>

packages/grafana-ui/src/components/Table/CellActions.tsx

@@ -6,7 +6,7 @@ import { HorizontalGroup } from '../Layout/Layout';
 import { TooltipPlacement } from '../Tooltip';
 
 import { TableCellInspectModal } from './TableCellInspectModal';
-import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableCellProps, TableFieldOptions } from './types';
+import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableCellProps } from './types';
 import { getTextAlign } from './utils';
 
 interface CellActionProps extends TableCellProps {
@@ -23,7 +23,7 @@ export function CellActions({ field, cell, previewMode, showFilters, onCellFilte
   const [isInspecting, setIsInspecting] = useState(false);
 
   const isRightAligned = getTextAlign(field) === 'flex-end';
-  const inspectEnabled = Boolean((field.config.custom as TableFieldOptions)?.inspect);
+  const inspectEnabled = Boolean(field.config.custom?.inspect);
   const commonButtonProps: CommonButtonProps = {
     size: 'sm',
     tooltipPlacement: 'top',

packages/grafana-ui/src/components/Table/DefaultCell.tsx

@@ -12,13 +12,13 @@ import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
 
 import { CellActions } from './CellActions';
 import { TableStyles } from './styles';
-import { TableCellProps, TableFieldOptions, CustomCellRendererProps, TableCellOptions } from './types';
+import { TableCellProps, CustomCellRendererProps, TableCellOptions } from './types';
 import { getCellOptions } from './utils';
 
 export const DefaultCell = (props: TableCellProps) => {
   const { field, cell, tableStyles, row, cellProps, frame } = props;
 
-  const inspectEnabled = Boolean((field.config.custom as TableFieldOptions)?.inspect);
+  const inspectEnabled = Boolean(field.config.custom?.inspect);
   const displayValue = field.display!(cell.value);
 
   const showFilters = props.onCellFilterAdded && field.config.filterable;

packages/grafana-ui/src/components/Table/JSONViewCell.tsx

@@ -8,11 +8,11 @@ import { Button, clearLinkButtonStyles } from '../Button';
 import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
 
 import { CellActions } from './CellActions';
-import { TableCellProps, TableFieldOptions } from './types';
+import { TableCellProps } from './types';
 
 export function JSONViewCell(props: TableCellProps): JSX.Element {
   const { cell, tableStyles, cellProps, field, row } = props;
-  const inspectEnabled = Boolean((field.config.custom as TableFieldOptions)?.inspect);
+  const inspectEnabled = Boolean(field.config.custom?.inspect);
   const txt = css({
     cursor: 'pointer',
     fontFamily: 'monospace',

packages/grafana-ui/src/components/Table/Table.tsx

@@ -308,7 +308,7 @@ export const Table = memo((props: Props) => {
   };
 
   const handleScroll: UIEventHandler = (event) => {
-    const { scrollTop } = event.target as HTMLDivElement;
+    const { scrollTop } = event.currentTarget;
 
     if (listRef.current !== null) {
       listRef.current.scrollTo(scrollTop);

packages/grafana-ui/src/components/Table/hooks.ts

@@ -17,19 +17,20 @@ export function useFixScrollbarContainer(
   tableDivRef: React.RefObject<HTMLDivElement>
 ) {
   useEffect(() => {
-    const listVerticalScrollbarHTML = (variableSizeListScrollbarRef.current as HTMLDivElement)?.querySelector(
-      '.track-vertical'
-    );
+    if (variableSizeListScrollbarRef.current && tableDivRef.current) {
+      const listVerticalScrollbarHTML = variableSizeListScrollbarRef.current.querySelector('.track-vertical');
 
       // Select Table custom scrollbars
-    const tableScrollbarView = (tableDivRef.current as HTMLDivElement)?.firstChild;
+      const tableScrollbarView = tableDivRef.current.firstChild;
 
       //If they exists, move the scrollbar element to the Table container scope
       if (tableScrollbarView && listVerticalScrollbarHTML) {
-      listVerticalScrollbarHTML?.remove();
-      (tableScrollbarView as HTMLDivElement).querySelector(':scope > .track-vertical')?.remove();
-
-      (tableScrollbarView as HTMLDivElement).append(listVerticalScrollbarHTML as Node);
+        listVerticalScrollbarHTML.remove();
+        if (tableScrollbarView instanceof HTMLElement) {
+          tableScrollbarView.querySelector(':scope > .track-vertical')?.remove();
+          tableScrollbarView.append(listVerticalScrollbarHTML);
+        }
+      }
     }
   });
 }

packages/grafana-ui/src/components/Table/reducer.ts

@@ -18,7 +18,7 @@ export function useTableStateReducer({ onColumnResize, onSortByChange, data }: P
             const info = (newState.columnResizing.headerIdWidths as any)[0];
             const columnIdString = info[0];
             const fieldIndex = parseInt(columnIdString, 10);
-            const width = Math.round(newState.columnResizing.columnWidths[columnIdString] as number);
+            const width = Math.round(newState.columnResizing.columnWidths[columnIdString]);
 
             const field = data.fields[fieldIndex];
             if (!field) {

packages/grafana-ui/src/components/Table/utils.ts

@@ -257,7 +257,7 @@ export function rowToFieldValue(row: any, field?: Field): string {
 
 export function valuesToOptions(unique: Record<string, any>): SelectableValue[] {
   return Object.keys(unique)
-    .reduce((all, key) => all.concat({ value: unique[key], label: key }), [] as SelectableValue[])
+    .reduce<SelectableValue[]>((all, key) => all.concat({ value: unique[key], label: key }), [])
     .sort(sortOptions);
 }
 
@@ -409,7 +409,7 @@ export function getCellOptions(field: Field): TableCellOptions {
     return defaultCellOptions;
   }
 
-  return (field.config.custom as TableFieldOptions).cellOptions;
+  return field.config.custom.cellOptions;
 }
 
 /**

packages/grafana-ui/src/components/uPlot/PlotLegend.tsx

@@ -140,7 +140,7 @@ export const PlotLegend = React.memo(
           getItemKey: () => `${label}-${fieldIndex.frameIndex}-${fieldIndex.fieldIndex}`,
         };
       })
-      .filter((i) => i !== undefined) as VizLegendItem[];
+      .filter((i): i is VizLegendItem => i !== undefined);
 
     return (
       <VizLayout.Legend placement={placement} {...vizLayoutLegendProps}>

packages/grafana-ui/src/components/uPlot/config.ts

@@ -13,38 +13,47 @@ import {
 /**
  * @alpha
  */
-export const graphFieldOptions = {
+export const graphFieldOptions: {
+  drawStyle: Array<SelectableValue<GraphDrawStyle>>;
+  lineInterpolation: Array<SelectableValue<LineInterpolation>>;
+  barAlignment: Array<SelectableValue<BarAlignment>>;
+  showPoints: Array<SelectableValue<VisibilityMode>>;
+  axisPlacement: Array<SelectableValue<AxisPlacement>>;
+  fillGradient: Array<SelectableValue<GraphGradientMode>>;
+  stacking: Array<SelectableValue<StackingMode>>;
+  thresholdsDisplayModes: Array<SelectableValue<GraphTresholdsStyleMode>>;
+} = {
   drawStyle: [
     { label: 'Lines', value: GraphDrawStyle.Line },
     { label: 'Bars', value: GraphDrawStyle.Bars },
     { label: 'Points', value: GraphDrawStyle.Points },
-  ] as Array<SelectableValue<GraphDrawStyle>>,
+  ],
 
   lineInterpolation: [
     { description: 'Linear', value: LineInterpolation.Linear, icon: 'gf-interpolation-linear' },
     { description: 'Smooth', value: LineInterpolation.Smooth, icon: 'gf-interpolation-smooth' },
     { description: 'Step before', value: LineInterpolation.StepBefore, icon: 'gf-interpolation-step-before' },
     { description: 'Step after', value: LineInterpolation.StepAfter, icon: 'gf-interpolation-step-after' },
-  ] as Array<SelectableValue<LineInterpolation>>,
+  ],
 
   barAlignment: [
     { description: 'Before', value: BarAlignment.Before, icon: 'gf-bar-alignment-before' },
     { description: 'Center', value: BarAlignment.Center, icon: 'gf-bar-alignment-center' },
     { description: 'After', value: BarAlignment.After, icon: 'gf-bar-alignment-after' },
-  ] as Array<SelectableValue<BarAlignment>>,
+  ],
 
   showPoints: [
     { label: 'Auto', value: VisibilityMode.Auto, description: 'Show points when the density is low' },
     { label: 'Always', value: VisibilityMode.Always },
     { label: 'Never', value: VisibilityMode.Never },
-  ] as Array<SelectableValue<VisibilityMode>>,
+  ],
 
   axisPlacement: [
     { label: 'Auto', value: AxisPlacement.Auto, description: 'First field on the left, everything else on the right' },
     { label: 'Left', value: AxisPlacement.Left },
     { label: 'Right', value: AxisPlacement.Right },
     { label: 'Hidden', value: AxisPlacement.Hidden },
-  ] as Array<SelectableValue<AxisPlacement>>,
+  ],
 
   fillGradient: [
     { label: 'None', value: GraphGradientMode.None },
@@ -55,13 +64,13 @@ export const graphFieldOptions = {
       value: GraphGradientMode.Scheme,
       description: 'Use color scheme to define gradient',
     },
-  ] as Array<SelectableValue<GraphGradientMode>>,
+  ],
 
   stacking: [
     { label: 'Off', value: StackingMode.None },
     { label: 'Normal', value: StackingMode.Normal },
     { label: '100%', value: StackingMode.Percent },
-  ] as Array<SelectableValue<StackingMode>>,
+  ],
 
   thresholdsDisplayModes: [
     { label: 'Off', value: GraphTresholdsStyleMode.Off },
@@ -70,5 +79,5 @@ export const graphFieldOptions = {
     { label: 'As filled regions', value: GraphTresholdsStyleMode.Area },
     { label: 'As filled regions and lines', value: GraphTresholdsStyleMode.LineAndArea },
     { label: 'As filled regions and lines (dashed)', value: GraphTresholdsStyleMode.DashedAndArea },
-  ] as Array<SelectableValue<GraphTresholdsStyleMode>>,
+  ],
 };

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts

@@ -74,7 +74,7 @@ export class UPlotConfigBuilder {
       this.hooks[type] = [];
     }
 
-    this.hooks[type]!.push(hook as any);
+    this.hooks[type].push(hook);
   }
 
   addThresholds(options: UPlotThresholdOptions) {
@@ -295,7 +295,7 @@ export type Renderers = Array<{
 }>;
 
 /** @alpha */
-type UPlotConfigPrepOpts<T extends Record<string, any> = {}> = {
+type UPlotConfigPrepOpts<T extends Record<string, unknown> = {}> = {
   frame: DataFrame;
   theme: GrafanaTheme2;
   timeZones: TimeZone[];

packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts

@@ -239,7 +239,7 @@ let builders: PathBuilders | undefined = undefined;
 function mapDrawStyleToPathBuilder(
   style: GraphDrawStyle,
   lineInterpolation?: LineInterpolation,
-  barAlignment = 0,
+  barAlignment = BarAlignment.Center,
   barWidthFactor = 0.6,
   barMaxWidth = 200
 ): Series.PathBuilder {
@@ -262,7 +262,7 @@ function mapDrawStyleToPathBuilder(
     if (!builders[barsCfgKey]) {
       builders[barsCfgKey] = pathBuilders.bars!({
         size: [barWidthFactor, barMaxWidth],
-        align: barAlignment as BarAlignment,
+        align: barAlignment,
       });
     }
 

packages/grafana-ui/src/components/uPlot/config/gradientFills.ts

@@ -254,34 +254,28 @@ export function getScaleGradientFn(
 
     if (colorMode.id === FieldColorModeId.Thresholds) {
       if (thresholds.mode === ThresholdsMode.Absolute) {
-        const valueStops = thresholds.steps.map(
-          (step) =>
-            [step.value, colorManipulator.alpha(theme.visualization.getColorByName(step.color), opacity)] as ValueStop
-        );
+        const valueStops: ValueStop[] = thresholds.steps.map((step) => [
+          step.value,
+          colorManipulator.alpha(theme.visualization.getColorByName(step.color), opacity),
+        ]);
         gradient = scaleGradient(plot, scaleKey, valueStops, true);
       } else {
         const [min, max] = getGradientRange(plot, scaleKey, hardMin, hardMax, softMin, softMax);
         const range = max - min;
-        const valueStops = thresholds.steps.map(
-          (step) =>
-            [
+        const valueStops: ValueStop[] = thresholds.steps.map((step) => [
           min + range * (step.value / 100),
           colorManipulator.alpha(theme.visualization.getColorByName(step.color), opacity),
-            ] as ValueStop
-        );
+        ]);
         gradient = scaleGradient(plot, scaleKey, valueStops, true);
       }
     } else if (colorMode.getColors) {
       const colors = colorMode.getColors(theme);
       const [min, max] = getGradientRange(plot, scaleKey, hardMin, hardMax, softMin, softMax);
       const range = max - min;
-      const valueStops = colors.map(
-        (color, i) =>
-          [
+      const valueStops: ValueStop[] = colors.map((color, i) => [
         min + range * (i / (colors.length - 1)),
         colorManipulator.alpha(theme.visualization.getColorByName(color), opacity),
-          ] as ValueStop
-      );
+      ]);
       gradient = scaleGradient(plot, scaleKey, valueStops, false);
     }
 

packages/grafana-ui/src/components/uPlot/utils.ts

@@ -117,7 +117,7 @@ export function getStackingGroups(frame: DataFrame) {
     let transform = custom.transform;
     let stackDir = getStackDirection(transform, values);
 
-    let drawStyle = custom.drawStyle as GraphDrawStyle;
+    let drawStyle: GraphDrawStyle = custom.drawStyle;
     let drawStyle2 =
       drawStyle === GraphDrawStyle.Bars
         ? (custom.barAlignment as BarAlignment)
@@ -153,7 +153,7 @@ export function preparePlotData2(
   stackingGroups: StackingGroup[],
   onStackMeta?: (meta: StackMeta) => void
 ) {
-  let data = Array(frame.fields.length) as AlignedData;
+  let data: AlignedData = Array(frame.fields.length);
 
   let stacksQty = stackingGroups.length;
 

packages/grafana-ui/src/slate-plugins/slate-prism/index.ts

@@ -55,7 +55,7 @@ export function SlatePrism(optsParam: OptionsFormat = {}, prismLanguages = Prism
           children: props.children,
           decoration: props.decoration,
         },
-        editor as any,
+        editor,
         next
       ),
   };

packages/grafana-ui/src/themes/ThemeContext.tsx

@@ -88,7 +88,7 @@ export function useTheme2(): GrafanaTheme2 {
 export function useStyles<T>(getStyles: (theme: GrafanaTheme) => T) {
   const theme = useTheme();
 
-  let memoizedStyleCreator = memoizedStyleCreators.get(getStyles) as typeof getStyles;
+  let memoizedStyleCreator: typeof getStyles = memoizedStyleCreators.get(getStyles);
   if (!memoizedStyleCreator) {
     memoizedStyleCreator = stylesFactory(getStyles);
     memoizedStyleCreators.set(getStyles, memoizedStyleCreator);
@@ -108,7 +108,7 @@ export function useStyles<T>(getStyles: (theme: GrafanaTheme) => T) {
 export function useStyles2<T>(getStyles: (theme: GrafanaTheme2) => T) {
   const theme = useTheme2();
 
-  let memoizedStyleCreator = memoizedStyleCreators.get(getStyles) as typeof getStyles;
+  let memoizedStyleCreator: typeof getStyles = memoizedStyleCreators.get(getStyles);
   if (!memoizedStyleCreator) {
     memoizedStyleCreator = stylesFactory(getStyles);
     memoizedStyleCreators.set(getStyles, memoizedStyleCreator);

packages/grafana-ui/src/utils/table.ts

@@ -5,7 +5,7 @@ import { Field, LinkModel } from '@grafana/data';
 /**
  * @internal
  */
-export const getCellLinks = (field: Field, row: Row<any>) => {
+export const getCellLinks = (field: Field, row: Row) => {
   let links: Array<LinkModel<unknown>> | undefined;
   if (field.getLinks) {
     links = field.getLinks({

plugins-bundled/internal/input-datasource/src/InputDatasource.ts

@@ -97,8 +97,8 @@ function getLength(data?: DataFrameDTO | DataFrame) {
   if (!data || !data.fields || !data.fields.length) {
     return 0;
   }
-  if (data.hasOwnProperty('length')) {
-    return (data as DataFrame).length;
+  if ('length' in data) {
+    return data.length;
   }
   return data.fields[0].values!.length;
 }

public/app/angular/services/AngularLoader.ts

@@ -9,11 +9,11 @@ export class AngularLoader implements AngularLoaderInterface {
   static $inject = ['$compile', '$rootScope'];
 
   constructor(
-    private $compile: any,
+    private $compile: angular.ICompileService,
     private $rootScope: GrafanaRootScope
   ) {}
 
-  load(elem: any, scopeProps: any, template: string): AngularComponent {
+  load(elem: HTMLElement, scopeProps: any, template: string): AngularComponent {
     const scope = this.$rootScope.$new();
 
     assign(scope, scopeProps);