Chore: Remove several 'as' type assertions (#45913)

public/app/core/components/Footer/Footer.tsx

@@ -5,7 +5,7 @@ import { Icon, IconName } from '@grafana/ui';
 export interface FooterLink {
   text: string;
   id?: string;
-  icon?: string;
+  icon?: IconName;
   url?: string;
   target?: string;
 }
@@ -77,7 +77,7 @@ export const Footer: FC = React.memo(() => {
           {links.map((link) => (
             <li key={link.text}>
               <a href={link.url} target={link.target} rel="noopener" id={link.id}>
-                {link.icon && <Icon name={link.icon as IconName} />} {link.text}
+                {link.icon && <Icon name={link.icon} />} {link.text}
               </a>
             </li>
           ))}

public/app/core/components/PageActionBar/PageActionBar.tsx

@@ -12,10 +12,10 @@ export interface Props {
 export default class PageActionBar extends PureComponent<Props> {
   render() {
     const { searchQuery, linkButton, setSearchQuery, target, placeholder = 'Search by name or type' } = this.props;
-    const linkProps = { href: linkButton?.href, disabled: linkButton?.disabled };
+    const linkProps: typeof LinkButton.defaultProps = { href: linkButton?.href, disabled: linkButton?.disabled };
 
     if (target) {
-      (linkProps as any).target = target;
+      linkProps.target = target;
     }
 
     return (

public/app/core/components/PermissionList/AddPermission.tsx

@@ -41,8 +41,8 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
     };
   }
 
-  onTypeChanged = (item: any) => {
-    const type = item.value as AclTarget;
+  onTypeChanged = (item: SelectableValue<AclTarget>) => {
+    const type = item.value;
 
     switch (type) {
       case AclTarget.User:

public/app/core/components/RolePicker/RolePickerInput.tsx

@@ -1,4 +1,4 @@
-import React, { FormEvent, HTMLProps, MutableRefObject, useEffect, useRef } from 'react';
+import React, { FormEvent, HTMLProps, useEffect, useRef } from 'react';
 import { css, cx } from '@emotion/css';
 import { useStyles2, getInputStyles, sharedInputStyle, styleMixins, Tooltip, Icon } from '@grafana/ui';
 import { GrafanaTheme2 } from '@grafana/data';
@@ -36,7 +36,7 @@ export const RolePickerInput = ({
 
   useEffect(() => {
     if (isFocused) {
-      (inputRef as MutableRefObject<HTMLInputElement>).current?.focus();
+      inputRef.current?.focus();
     }
   });
 

public/app/core/components/Select/SortPicker.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { useAsync } from 'react-use';
-import { Icon, IconName, Select } from '@grafana/ui';
+import { Icon, Select } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 import { DEFAULT_SORT } from 'app/features/search/constants';
 import { SearchSrv } from '../../services/search_srv';
@@ -36,7 +36,7 @@ export const SortPicker: FC<Props> = ({ onChange, value, placeholder, filter })
       options={options}
       aria-label="Sort"
       placeholder={placeholder ?? `Sort (Default ${DEFAULT_SORT.label})`}
-      prefix={<Icon name={(value?.includes('asc') ? 'sort-amount-up' : 'sort-amount-down') as IconName} />}
+      prefix={<Icon name={value?.includes('asc') ? 'sort-amount-up' : 'sort-amount-down'} />}
     />
   ) : null;
 };

public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx

@@ -19,7 +19,7 @@ interface Props {
 }
 
 export class SplitPaneWrapper extends PureComponent<Props> {
-  rafToken = createRef<number>();
+  rafToken: MutableRefObject<number | null> = createRef();
   static defaultProps = {
     rightPaneVisible: true,
   };
@@ -36,7 +36,7 @@ export class SplitPaneWrapper extends PureComponent<Props> {
     if (this.rafToken.current !== undefined) {
       window.cancelAnimationFrame(this.rafToken.current!);
     }
-    (this.rafToken as MutableRefObject<number>).current = window.requestAnimationFrame(() => {
+    this.rafToken.current = window.requestAnimationFrame(() => {
       this.forceUpdate();
     });
   };
@@ -68,8 +68,7 @@ export class SplitPaneWrapper extends PureComponent<Props> {
   renderHorizontalSplit() {
     const { leftPaneComponents, uiState } = this.props;
     const styles = getStyles(config.theme);
-    const topPaneSize =
-      uiState.topPaneSize >= 1 ? (uiState.topPaneSize as number) : (uiState.topPaneSize as number) * window.innerHeight;
+    const topPaneSize = uiState.topPaneSize >= 1 ? uiState.topPaneSize : uiState.topPaneSize * window.innerHeight;
 
     /*
       Guesstimate the height of the browser window minus
@@ -104,9 +103,7 @@ export class SplitPaneWrapper extends PureComponent<Props> {
 
     // Need to handle when width is relative. ie a percentage of the viewport
     const rightPaneSize =
-      uiState.rightPaneSize <= 1
-        ? (uiState.rightPaneSize as number) * window.innerWidth
-        : (uiState.rightPaneSize as number);
+      uiState.rightPaneSize <= 1 ? uiState.rightPaneSize * window.innerWidth : uiState.rightPaneSize;
 
     if (!rightPaneVisible) {
       return this.renderHorizontalSplit();

public/app/core/history/RichHistoryLocalStorage.test.ts

@@ -151,12 +151,10 @@ describe('RichHistoryLocalStorage', () => {
 
       // one not starred replaced with a newly added starred item
       const removedNotStarredItems = extraItems + 1; // + 1 to make space for the new item
-      const newHistory = store.getObject(key);
+      const newHistory = store.getObject<typeof history>(key)!;
       expect(newHistory).toHaveLength(MAX_HISTORY_ITEMS); // starred item added
-      expect(newHistory.filter((h: RichHistoryQuery) => h.starred)).toHaveLength(starredItemsInHistory + 1); // starred item added
-      expect(newHistory.filter((h: RichHistoryQuery) => !h.starred)).toHaveLength(
-        starredItemsInHistory - removedNotStarredItems
-      );
+      expect(newHistory.filter((h) => h.starred)).toHaveLength(starredItemsInHistory + 1); // starred item added
+      expect(newHistory.filter((h) => !h.starred)).toHaveLength(starredItemsInHistory - removedNotStarredItems);
     });
   });
 

public/app/core/store.ts

@@ -16,7 +16,9 @@ export class Store {
     return window.localStorage[key] === 'true';
   }
 
-  getObject(key: string, def?: any) {
+  getObject<T = unknown>(key: string): T | undefined;
+  getObject<T = unknown>(key: string, def: T): T;
+  getObject<T = unknown>(key: string, def?: T) {
     let ret = def;
     if (this.exists(key)) {
       const json = window.localStorage[key];

public/app/features/canvas/runtime/root.tsx

@@ -27,12 +27,12 @@ export class RootElement extends GroupState {
     this.changeCallback();
   }
 
-  getSaveModel() {
+  getSaveModel(): CanvasGroupOptions {
     const { placement, anchor, ...rest } = this.options;
 
     return {
       ...rest, // everything except placement & anchor
       elements: this.elements.map((v) => v.getSaveModel()),
-    } as CanvasGroupOptions;
+    };
   }
 }

public/app/features/explore/state/utils.ts

@@ -96,7 +96,7 @@ export async function loadAndInitDatasource(
   }
 
   const historyKey = `grafana.explore.history.${instance.meta?.id}`;
-  const history = store.getObject(historyKey, []);
+  const history = store.getObject<HistoryItem[]>(historyKey, []);
   // Save last-used datasource
 
   store.set(lastUsedDatasourceKeyForOrgId(orgId), instance.uid);